How to make JQuery file upload plugin call backend only once for all the files in an upload?

Question

I'm using sails.js to build a website. I have a model named timeline. It has some text fields along with a collection named pictures. Each timeline can have multiple pictures. I want to update all these fields at once when user clicks save. I'm using JQuery file uploader to help multifile upload.

Problem is, JQuery file upload calls my backend file-uploader service once for each picture uploaded. I need to update the other text fields only once and they need to be updated before the pictures records get created since each picture needs to have a timeline ID associated with them.

Is async tasks the way to go? I don't feel so since JQuery file uploader calls my backend multiple times, I don't think I can push the tasks and update other fields using async parallel. I could've done it if it were a single call to upload.

I'm thinking of keeping two submit buttons - one for text fields and one for file uploads but really don't prefer this way. It would be great if anyone guides me on this.

Answer 1

If I understand your question correctly, I think you need to check the file jquery.fileupload.js around line 112 try to change singleFileUploads: false,

Answer 2

var counter = 0;
var allFilesObj = Array();

req.file('files[]') .upload({

            saveAs: function (__newFileStream, cb) { 
                var fileObj = {};

                var extension = __newFileStream.filename.split('.').pop();
                var original_name = __newFileStream.filename;


                fileObj.original_name = original_name;
                fileObj.name = "Thename";
                fileObj.ext = extension;
                fileObj.path = uploadpath+"The name"+ "." + extension;
                counter++;
                allFilesObj.push(fileObj);
                cb(null, uploadpath+"The name"+ "." + extension;);
            }
        }, function whenDone(err, uploadedFiles) {
            if (err) {
                console.log("ERROR");
                console.log(err);
                return res.negotiate(err);

            }

            else {

                    async.each(allFilesObj, function (row, done) {
                        var index = allFilesObj.indexOf(row);
                        row.col1 = req.param('col1');
                        row.col2 = req.param('col2');
                       row.col3 = req.param('col3');

                        done();
                    }, function (err) {

                        if (err) {
                            res.send("Error 500 , complete object array Defunct");

                        }



                        //DATABASE INSERT

                        YourModel.create(allFilesObj, function batchFileCreated(err, user) {

                            if (err) {
                                return res.send(err);
                            }
                            console.log("done");

// req.session.messages['success'][0] = "Files Uploaded successfully"; // return res.redirect(req.get('referer'),{files: uploadedFiles,textParams: req.params.all()}); return res.ok({ files: uploadedFiles, textParams: req.params.all() }); });

                    });



                } 
            }

        });

Answer 3

Setting SingleFileUploads to false didn't help much with JQuery file uploader since there seems to be a bug as discussed above. So I set that thing back to true.

I separated the inputs into two separate forms - one for text fields input and one for files(which goes through JQuery file uploader). For the text fields form, I kept a visible button the user can click. For the other one, I hid the button. So once the user clicks the visible button, I submit only the text input and create a database record in the backend(this is done using an AJAX call) and in the success field of AJAX call, I .click() the hidden button if the file count is more than 0.