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?

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);
}