Uploading multiple files with Sails.js 0.10 and Skipper using Dropzone.js

Question

I have an issue with multiple file upload in my sails app. I am trying to implement multiple file upload with Dropzone.js and my backend is Sails v0.10.0-rc8.

Now when I upload some files via dropzone, I see that in case of multiple upload it sends the files with separate params in the request. The param names are 'photo[0]', 'photo[1]', 'photo[2]',.... I am getting the files in controller like this:

req.file(file).upload(function (err, files) {

    // save the file

});

But when there is more then one file submitted, the request is being passed to controller before all files are parsed and stored from request, so I get only one file in my controller.

Has anyone experienced this issue? Maybe there is no support for multiple file upload with different request parameters in skipper body parser? Because when I submit several files inside one attribute ('photo'), all of them are handled and passed to controller.

Answer 1

This should work, provided you loop through the param names asynchronously, e.g.:

async.map(paramNames, function(file, cb) {

    req.file(file).upload(function (err, files) {

        // save the file, and then:
        return cb(err, files);

    });

}, function doneUploading(err, files) {

       // If any errors occurred, show server error
       if (err) {return res.serverError(err);}
       // Otherwise list files that were uploaded
       return res.json(files);

});

I was able to test this successfully.

Answer 2

This seems to work okay for me:

    Dropzone.options.fotagDropzone = {
    init: function() {

    this.on("success", function(file, responseText) {
    // Handle the responseText here. For example, add the text to the preview element:
    console.log(responseText.files[0]);
    file.previewTemplate.appendChild(document.createTextNode(responseText.files[0].fd));
    });

    },
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 10, // MB
    uploadMultiple: false,
    addRemoveLinks: true,
    parallelUploads: true,
    dictDefaultMessage: 'Drag files here <br />or<br /><button class="dzUploadBtn" type="button">click here to upload</button>',
    acceptedMimeTypes: '.jpg'
    };

Basically, it doesn't send the files all together, but you can still drop multiple files into the dropzone. The back end is your standard upload using skipper.