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.

score 2 · Answer 1 · answered Aug 12 '15 at 12:34

2

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,

answered Aug 12 '15 at 12:34

mo.dhouibi

565
1
4
18

Thanks @mo.dhouibi . I am trying your solution. JQuery file upload needs us to send it certain parameters after upload like "size, url, thumbnailUrl, deleteUrl" from backend file upload service. So now if I set `singleFileUploads : false`, these parameters need to be changed to arrays? – A.R.K.S Aug 12 '15 at 16:50
I am sorry but I am not 100% sure about how you doing this but assuming that you want to upload batch of files and Insert rows in your database, this may not answer your question but it might help you : – mo.dhouibi Aug 12 '15 at 17:31

score 1 · Answer 2 · answered Aug 12 '15 at 17:31

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() }); });

I'm facing another problem. With `SingleFileUploads` set to false, multiple files selected "at once" get uploaded in one request but instead of selecting multiple files at once, if I add many files with separate "add file" clicks, it still sends it one file at a time. I checked if I need to set any other flags for this, but there doesn't seem to be. Any ideas? — A.R.K.S, Aug 12 '15 at 23:11
adding many files with separate "add file" clicks, This I assume it is a bug with jquery-upload-file, in my experience, the separate add click consider only the last batch... maybe someone can confirm this and if this is the case, you need to work out a way on the front-end to stop user from clicking twice. — mo.dhouibi, Aug 13 '15 at 10:21

score 1 · Accepted Answer · answered Aug 16 '15 at 08:47

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.

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

3 Answers3

Linked