jquerylaravelfileuploadblueimp

Laravel, jQuery File upload error - "Call to a member function store() on array"


I use this library to upload files https://github.com/blueimp/jQuery-File-Upload

When I try to upload a file I get an error: "Call to a member function store() on array" It seems like there's an issue with $request->files variable. When is's being passed to foreach loop, it does not return the correct index.

Thank you for your help.

Controller

public function upload(Request $request) {
      foreach($request->files as $file) {
        $filename = $file->store('library');
      }
    }

The output of dd($request->files)

FileBag {#68
  #parameters: array:1 [
    "files" => array:1 [
      0 => UploadedFile {#45
        -test: false
        -originalName: "img_(17).jpg"
        -mimeType: "image/jpeg"
        -size: 1260662
        -error: 0
        path: "D:\xampp\tmp"
        filename: "phpD7B1.tmp"
        basename: "phpD7B1.tmp"
        pathname: "D:\xampp\tmp\phpD7B1.tmp"
        extension: "tmp"
        realPath: "D:\xampp\tmp\phpD7B1.tmp"
        aTime: 2018-05-30 16:10:02
        mTime: 2018-05-30 16:10:02
        cTime: 2018-05-30 16:10:02
        inode: 0
        size: 1260662
        perms: 0100666
        owner: 0
        group: 0
        type: "file"
        writable: true
        readable: true
        executable: false
        file: true
        dir: false
        link: false
        linkTarget: "D:\xampp\tmp\phpD7B1.tmp"
      }
    ]
  ]
}

Response, when I use var_dump($file) in the controller within foreach loop.

array(1) {
  [0]=>
  object(Symfony\Component\HttpFoundation\File\UploadedFile)#45 (7) {
    ["test":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    bool(false)
    ["originalName":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(12) "zdjęcie.jpg"
    ["mimeType":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(10) "image/jpeg"
    ["size":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    int(7445)
    ["error":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    int(0)
    ["pathName":"SplFileInfo":private]=>
    string(24) "D:\xampp\tmp\php7175.tmp"
    ["fileName":"SplFileInfo":private]=>
    string(11) "php7175.tmp"
  }
}

View

<div id="dropZone">
  <h1>Drag & Drop Files...</h1>
  <input type="file" id="fileupload" name="files[]" multiple>
</div>
<h1 id="error"></h1><br><br>
<h1 id="progress"></h1><br><br>
<div id="files"></div>

<script>
$(function () {
   var files = $("#files");

   $("#fileupload").fileupload({
       url: '{{ route("libraryUpload") }}',
       dropZone: '#dropZone',
       dataType: 'json',
       autoUpload: false,
       headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
   }).on('fileuploadadd', function (e, data) {
       var fileTypeAllowed = /.\.(gif|jpg|png|jpeg)$/i;
       var fileName = data.originalFiles[0]['name'];
       var fileSize = data.originalFiles[0]['size'];

       if (!fileTypeAllowed.test(fileName))
            $("#error").html('Only images are allowed!');
       else if (fileSize > 5000000)
           $("#error").html('Your file is too big! Max allowed size is: 5MB');
       else {
           $("#error").html("");
           data.submit();
       }
   }).on('fileuploaddone', function(e, data) {
        var status = data.jqXHR.responseJSON.status;
        var msg = data.jqXHR.responseJSON.msg;

        if (status == 1) {
            var path = data.jqXHR.responseJSON.path;
            $("#files").fadeIn().append('<p><img style="width: 100px; height: 100px;" src="'+path+'" /></p>');
        } else
            $("#error").html(msg);
   }).on('fileuploadprogressall', function(e,data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $("#progress").html("Completed: " + progress + "%");
   });
});
</script>

Solution

  • Try to var_dump '$file' within foreach loop so that you can get some idea about it's type