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.

Flameout

Is this code contained in a loop of some kind? The argument to req.file is the parameter that the file was sent under, and in your case the files are all sent using different params, so it stands to reason that the .upload would result in just one file being returned. I actually don't know if multiple calls to req.file will even work, but first lets be clear about whether you're trying that or not. – Pimple

yes, there is a loop with all possible file names I have – Flameout

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.

Pimple

Hmm... I ended up using async.eachSeries as I do some other stuff after each saving of file, and it worked for me. Thanks for reminding about async ;) – Flameout

But how to get files params from req. ? (in above ex. paramNames ) – Baronial

Perfect!, helpfull – Chronometer

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.

Overtone

Answer 3

With Dropzone and Sails.js, you have to:

• add the definination of the filename in dropzone configuration:

Dropzone.options.myDropzone = { paramName: "fileName" }

• use this command to get back the uploaded file:

req.file('fileName').upload(function (err, uploadedFiles) {

});

uploadedFiles contains the file

Bork