Upload order with Dropzone.js

Question

I am using Dropzone.js and my PHP script to upload files to my server. I am noticing that they don't exactly upload in the order I select them. For example, say I have 1.jpg, 2.jpg, 3.jpg, 4.jpg & 5.jpg.

They are uploaded in the order the server receives them the fastest. So it could be uploaded like 4, 2, 5, 3, 1.

My PHP script also inserts the file into a database, which is why ordering is important. I couldn't find a config option to upload in order, but I am thinking I might be able to step through the queue and upload them in order that way rather than letting dropzone handle the queue.

@Sully that appears to be working! It still uploads it in the order the files are selected, but that is better than random order, thank you — Ronnie
No prob. Its been a while, but I had a similar issue. In order to keep parallel (and much faster) uploads, I used one of dropzone's complete/success events to pass a "file id" back to the page. After the user "saves the page", I posted back the file ids in the order I wanted. That way files can be uploaded/saved arbitrarily, but ultimately the order was saved. If you are interested in some code for that I may be able to dig it up. — Sully
If that parallelUploads wasn't available, I was going to do something similar with file queue and events. This solution will suffice. If you want to post it as an answer, I will accept it. — Ronnie

Sully Sully · Accepted Answer · 2015-03-10T18:20:09

parallelUploads set to 1 should help, but is a pretty big slow down depending on how many files/size of files to be uploaded.

To get back parallelUploads, but have control over the order, you can pass a FileID back as the response from your upload url, and that can be read on dropzone's success event...

dropzoneObject.on("success", function (file, response) {
    // Requires a hidden field named FileIDs to exist in your previewTemplate.
    $(file.previewElement)
        .find("input[name='FileIDs']")
        .val(response);
});

And after all uploads complete (queuecomplete event), you can post back FileIDs in the order that you want.

Upload order with Dropzone.js

1 Answers