Reputation: 1521

AJAX/Laravel Multiple File Uploads

I'm trying to upload multiple files from a drag/drop event using jQuery/AJAX/Laravel.

MY DROP EVENT:

$( document ).on('drop dragleave', '.file-drag', function(e){
    $(this).removeClass('drop-ready');
    if(e.originalEvent.dataTransfer.files.length) {
      e.preventDefault();
      e.stopPropagation();

      if (e.type === "drop") {
      var files = e.originalEvent.dataTransfer.files;
      AjaxFileUpload(files)
      }
    }
  });

MY UPLOAD SCRIPT:

function AjaxFileUpload(files){
    console.log(files);

    //Start appending the files to the FormData object.
    var formData = new FormData;
    formData.append('_token', CSRF_TOKEN);
    for(var i = 0; i < files.length; i++){
      formData.append(files[i].name, files[i])
    }

    console.log(formData.entries());

    $.ajax({
        //Server script/controller to process the upload
        url: 'upload',
        type: 'POST',

        // Form data
        data: formData,

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,
        // Error logging
        error: function(jqXHR, textStatus, errorThrown){
          console.log(JSON.stringify(jqXHR));
          console.log('AJAX Error: ' + textStatus + ": " + errorThrown);
        },
        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
        success: function(data){
          console.log(data);
        }
    });
  }

MY CONTROLLER CODE:

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      return $request->all();
    }
}

I THINK my images are getting to the server side, as when I return the request object, I get the following in console:

Thus, the CSRF token is getting through, and the images (I think?) are getting through. My problem from here is accessing the files with PHP and storing them via ->store();.

In the countless examples online/documentation, they typically use something along the lines of:

$path = $request->photo->store('images');

However, I don't understand the 'photo' aspect of this. What if a video or a PDF is uploaded? I basically don't understand how I am to access the different parts of the request object. Documentation on Laravel site is pretty sparse for this and only gives an example using 'photo' of which it never explains.

Upvotes: 2

Answers (3)

Andy White

Reputation: 446

This took me a while but I finally got a working solution. I'm using Dropzone so the list of file objects is returned by getAcceptedFiles() but it should be the same concept for you. I'm also attaching the files to an existing form.

Upload:

var formElement = document.getElementById("addForm");
var formData = new FormData(formElement);
// Attach uploaded files to form submission
var files = myDZ.getAcceptedFiles();  // using Dropzone
for (var i = files.length - 1; i >= 0; i--) {
    formData.append('files[]', files[i]);
}

$.ajax({
    url: 'home/',
    data: formData,
    processData: false,
    contentType: false,
    timeout: 1000,
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken,
    },
    success: function(){
       ...
    },
    error: function (jqXHR, textStatus) {
      ...
    }
});

Controller:

foreach($request->only('files') as $files){
    foreach ($files as $file) {
        if(is_file($file)) {    // not sure this is needed
            $fname = $file->getClientOriginalName();
            $fpath = $file->store('docs'); // path to file
        }
    }
}

Dropzone Script:

Dropzone.autoDiscover = false;

var myDZ = new Dropzone("#my-dropzone", {
    url: "/home/files",
    maxFilesize: 5,
    maxFiles: 5,
    addRemoveLinks: true,
    dictDefaultMessage: 'Drop files here or click to upload <br> (max: 5 files)',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken
    },
});

Upvotes: 2

Vranvs

Reputation: 1521

Figured it out.

In my uploadscontroller:

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      $arr = [];
      foreach($request->all() as $file){
        if(is_file($file)){
          $string = str_random(16);
          $ext = $file->guessExtension();
          $file_name = $string . '.' .  $ext;
          $filepath = 'uploads/' . Auth::user()->username . '/' . $file_name;
          $file->storeAs(('uploads/' . Auth::user()->username), $file_name);
          array_push($arr, [$file_name, $filepath]);
        }

      }
      return $arr;
    }
}

Upvotes: 4

alaric

Reputation: 987

Regarding the examples found in Laravel's documentation, 'photo' is simply making use of a magic method to reference a file uploaded with a name of 'photo'. You can replace 'photo' with whatever your specific file names is/are. Specific functions capable of being called on your uploaded files can be found here.

Upvotes: 0

AJAX/Laravel Multiple File Uploads

Answers (3)

Related Questions