Request is empty laravel ajax multiple images

Question

So I had some functioning code, but I needed to add multiple image uploads to it. I used this plugin. Now my HTML looks like this:

<form class="form-horizontal full-width pull-left m-t-20" name="myForm" ng-if="showForm">
    <div class="form-group">
      <label for="Naam" class="col-sm-3 control-label">Naam</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="Naam" ng-model="addForm.name" placeholder="Naam">
      </div>
    </div>
    <div class="form-group">
      <div class="imageselect col-sm-3">
        Afbeeldingen
        <input type="file" ngf-select ng-model="files" ngf-multiple="true" accept="image/*" />
        Drop afbeeldingen: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
      </div>
      <div class="col-sm-9">
        <div ng-repeat="file in files" class="imagepreview">
          <img ng-show="myForm.file.$valid" ngf-thumbnail="file" class="thumb"><br /> <button ng-click="file = null" class="thumbremove" ng-show="file">Verwijder</button>
        </div>
      </div>
    </div>
    <div class="form-group">
      <span class="progress" ng-show="files.progress >= 0">
        <div style="width:<< files.progress >>%" ng-bind="files.progress + '%'"></div>
      </span>
      <div class="col-sm-10">
        <button type="submit" ng-click="addStore(files)" class="btn btn-default">Opslaan</button>
      </div>
    </div>
</form>

and this is my javascript code:

.controller('StoresController', ['$scope', '$http', 'handlerService', 'Upload', '$timeout', function($scope, $http, handlerService, Upload, $timeout) {
  $scope.model = {};
  $scope.model.stores = stores;
  $scope.showForm = true;
  $scope.addForm = {};
  $scope.addForm.name = '';

  $scope.addStore = function(files) {
    $scope.showForm = true;
    files.upload = Upload.upload({
     method: 'POST',
     url: 'http://localhost:8000/stores/add/',
     data: {store : $scope.addForm, files: files},
    });

    files.upload.then(function (res) {
      $timeout(function () {
        handlerService.isValid(res.data);
        if(res.data.isValid == true) {
            $scope.showForm = false;
            $scope.addForm = {};
        }
      });
    }, function (response) {
      if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
      }, function (evt) {
      // Math.min is to fix IE which reports 200% sometimes
      files.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
    });
  }

}])

And the back-end part:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use DB;

class StoresController extends Controller
{
    public function add(Request $request) {
      $files = array();
      foreach($_FILES as $file) {
        $filename = $file['name'];
        $files[] = $file['name'];
        $destination = '../public/assets/img/stores/' . $filename;
        move_uploaded_file($file['tmp_name'] , $destination );
      }
      $store = $request->store;
      $store['images'] = json_encode($files);
      $isValid = false;
      if(isset($store['name']) && $store['name'] != '') {
        DB::table('stores')->insert(
            $store
        );
        $isValid = true;
        $message = 'store is added.';
      } else {
        $message = json_encode($request->all());
        $isValid = false;
      }

      $result = [
        'isValid' => $isValid,
        'message' => $message
      ];
      return json_encode($result);
    }
}

But the entire request is empty. Without the file upload part I could add stores without a problem. I can also see the payload gets sent with store and images when I inspect my AJAX request. What am I doing wrong?

Galenical

Do you get any error like internal error 500 in browser console? – Rosebay

No it doesn't give an error the message i return is filled with an empty array: "[]" – Galenical

try if(Request::ajax()) in your backend part to see if any request is got in the controller. – Rosebay

it returns false, which i think is strange because a ajax call is returning false to check if there's an ajax call @Rosebay – Galenical

@SjoerdDeWit for the ajax requests did you set Access-Control-Allow-Origin header? – Diantha

It is set in my .htaccess, Also this would trigger an error in the inspector console. I'm thinking it could have something to do with it being chunked uploaded. Because I do receive progress when uploading the files. There's just nothing there when the progress has finished. – Galenical

Answer 1

I needed to provide resumeSizeUrl or resumeSize, to check the progress of the files. After I did that my files send without a problem.

The backend part wasn't right aswell. In order to upload the files i used the Request class of laravel. This is the current backend code:

public function add(Request $request) {
  $isValid = true;

  DB::beginTransaction();
  $store = $request->store;
  if(isset($store['name']) && $store['name'] != '') {
    $id = DB::table('stores')->insertGetId(
        $store
    );
  } else {
    $message = 'Naam mag niet leeg zijn';
    $isValid = false;
  }

  if($isValid === true) {
    // getting all of the post data
    $files = $request->file('files');
    // Making counting of uploaded images
    $path = 'stores'.'/'.$id;
      $file_count = count($files);
      // start count how many uploaded
      $uploadcount = 0;
      foreach($files as $file) {
        $rules = array('file' => 'mimes:png,gif,jpeg'); //'required|txt,pdf,doc'
        $validator = Validator::make(array('file'=> $file), $rules);
        if($validator->passes()) {
          $destinationPath = 'img/'.$path.'/';
          $filename = $file->getClientOriginalName();
          $upload_success = $file->move($destinationPath, $filename);
          $uploadcount ++;
        } else {
          $message = 'Alleen afbeeldingen zijn toegestaan';
          $isValid = false;
        }
      }
      if($isValid == true) {
        if($uploadcount != $file_count) {
          $message = 'Niet alle bestanden zijn geupload';
          $isValid = false;
        }
      }
  }

  if($isValid == true) {
    DB::commit();
    $message = 'Store Toegevoegd!';
  }
  if($isValid == false) {
    DB::rollBack();
  }

  $result = [
    'isValid' => $isValid,
    'message' => $message
  ];

  return json_encode($result);
}

Galenical