How to change image upload order in dropzone.js?

@kadin 

To change the image upload order in dropzone.js, you can use the uploadedfiles callback function to control the order in which the files are uploaded. Here's an example code snippet that demonstrates how to change the order of uploaded images:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var myDropzone = new Dropzone("#my-dropzone", {
    url: "/upload",
    autoProcessQueue: false,
    parallelUploads: 3,
    maxFiles: 3,
    acceptedFiles: 'image/*',
    init: function() {
        this.on("addedfile", function(file) {
            // Add the file to the queue in a specific order
            this.enqueueFile(file);
        });

        this.on("queuecomplete", function() {
            // Clear the current queue and re-enqueue files in a specific order
            var files = this.files.slice(0); // Make a copy of the current array of files
            this.removeAllFiles();
            files.forEach(function(file) {
                this.enqueueFile(file);
            }, this);

            // Start uploading the files
            this.processQueue();
        });
    }
});

In this code snippet, we first create a new Dropzone instance and set the necessary configuration options such as autoProcessQueue and parallelUploads. We then use the addedfile and queuecomplete events to control the order in which files are uploaded.

When a file is added to the dropzone, we immediately enqueue the file to ensure that it is uploaded in the specific order. When the queue is complete, we clear the current queue of files, copy the files to a new array, and then re-enqueue the files in the desired order. Finally, we call processQueue() to start uploading the files in the specified order.

By using this approach, you can control the upload order of images in dropzone.js.