Dropzone.js drag-and-drop re-ordering of queue

[tiagorz]

I'm using dropzone with autoProcessQueue: false to give the user a chance to remove files/etc.

Ideally, what I would like to allow is drag-n-drop reordering of the queue...so that if a user selects 10 images and drags them into the dropzone, they can then be ordered with the mouse.

Any ideas?

[tanshiqi]

With jQuery UI sortable, you can try:

$("#myDropzone").sortable({
    items:'.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: "parent",
    distance: 20,
    tolerance: 'pointer',
    update: function(e, ui){
        // do what you want
    }
});

[ugljanin]

Hi, I have been able to reorder pictures with sortable, but when I click to upload all pictures, it uploads with same order as pictures are inserted. It does not remember new order.

[gusandriuolo]

Hi, i have working pretty well Dropzone but i cannot make work sortable option. Could you be more specific whit some example?

I already upload the images, rename it, redimension it, make 100x100px cropped thumb (for mockfile) and save record to mysql database.

[Bribin]

@Gusta21 I also facing the same issue. is any example related to sortable UI with Dropzone

[acanimal]

When you drop files on dropzone, internally it creates a file structure (that holds thumbnail, name, size, etc) and stores it in a queue of files to be processed.

Reordering items with jqueryUI or other similar solution simpy reorders the HTML elements but not the dropzone queue of files. That task is yours.

Once you know when the sortable library has made a modification a possible way to reorder the files within the queue is:

var queueArray = dropzone.getQueuedFiles();
// Reorder files within the array
dropzone.removeAllFiles();
// Loop and add your files again
dropzone.addFile(file);

[logistiker]

I solved the issue by assigning a unique auto incremented file id in a html5 dataset attribute (i.e. data-file-id) for each preview element when adding the file. Then in the stop method for jquery sortable, I reordered the dropzone files list directly which has the benefit of bypassing emit hooks (faster). So I don't think there's anything for the dropzone developers to do since it can all be done without modifying the dropzone library.

[ugljanin]

Could you please post your code so we could use id?

[Hunter-WebDev]

If anyone else stumbles onto here and is wondering how to do this, here is how I did it.

Every time a file is added store the file data onto the element:

dropzone_ins.on('addedfile', function(file) {
    $('.sortable_img li:last-of-type').data('file', file);
});

Then before I called the processQueue() function I cleared the queued files and then looped through them then re-added them in the custom order:

var current_queue = [];
$('.sortable_img > li').each( function(){
    current_queue.push($(this).data('file'));
});

dropzone_ins.removeAllFiles();

for(i=0;i<current_queue.length;i++){
    dropzone_ins.addFile(current_queue[i]);
}

dropzone_ins.processQueue();

[techsmartteam]

Thank you @MRHunter, it works for me

[tiaanpat]

@MRHunter could you please explain how you got .sortable_img li:last-of-type? Did you create a new list or is this an existing node? I can't find this!

[Hunter-WebDev]

@tiaanpat The list of queued files has the class "sortable_img" in my case, your situation is most likely different and will require a different selector.

[HudsonProdigy]

@MRHunter When trying to implement your solution the stored file overwrites all other stored files before it. been pulling my hair out for couple of days now. help would be much appreciated. this is all very new to me, I am sure i am missing something obvious.

previewTemplate: "<div class="dz-preview dz-file-preview cge-image-preview">\n <div class="dz-image">\n <div class="cge-image">\n <div class="dz-details">\n <div class="dz-size">\n <div class="dz-filename">\n \n <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress>\n <div class="dz-error-message">\n <div class="dz-success-mark">\n .....

this.on("addedfile", function (file) {
$('.cge-image-preview').data('file', file);
});

stop: function () {
console.log("Updating Queue");
newQueue = [];
$('.cge-image-preview').each(function () {
console.log($(this).data('file'))
//newQueue.push($(this).data('file'));
});
console.log(newQueue);

                        disableRemoveFile = true;
                        console.log("disable remove file")

                        productPhotoUploader.removeAllFiles();
                        console.log("que files deleted")

                        for (var i = 0; i < newQueue.length; i++) {
                            console.log("new que file added");
                            productPhotoUploader.addFile(newQueue[i]);
                            console.log(newQueue[i] + "Added")
                        };

New queue will print out same object(file) for as many times as there are files in queue.

Cheers
Cory

[Hunter-WebDev]

@HudsonCory Each time a new file is added you are writing the file information to each element with the class "cge-image-preview" using this code:

this.on("addedfile", function (file) {
    $('.cge-image-preview').data('file', file);
});

In my example I only add the file information to the last element which would look like this in your code:

this.on("addedfile", function (file) {
    $('.cge-image-preview:last-of-type').data('file', file);
});

[HudsonProdigy]

Amazing! Thanks for the super fast response.

Cheers!

[Bidzina]

@MRHunter your solution is great !! It works perfect but what about already uploaded images ? I have mockfiles for previev. When i change mock files order or add some new images, Dropzone processQueue() method will only fetch recently added images. Any ideas ?