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.

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. — sgress454, Jul 25 '14 at 18:34

score 8 · Accepted Answer · answered Jul 26 '14 at 21:45

8

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.

answered Jul 26 '14 at 21:45

sgress454

24,870
4
74
92

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 ;) – ArVan Aug 13 '14 at 12:43
2

But how to get files params from req. ? (in above ex. paramNames ) – Nishchit Nov 21 '15 at 09:11
Perfect!, helpfull – Sanjay Radadiya Aug 12 '19 at 11:25

score 1 · Answer 2 · answered May 30 '15 at 12:43

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.

score 0 · Answer 3 · answered Nov 29 '16 at 09:02

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

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

3 Answers3

Linked