Dropzone images reordering

Question

I have used dropzone to upload multiple pictures to my server with drag and drop. First I select all my pictures and then when I want to upload, I press button and all files are uploaded.

I want to change order they are uploaded, and I am using this tips Is there a way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance? and I can change order with mouse drag.

The problem is that when I upload pictures are not uploaded in order I have changed, but they are uploaded as I have initially put them in dropzone.

My dropzone is configured as this

autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 3,
clickable: ".add",
previewsContainer: "#previews", 
maxFiles: 5,

Significative

See this answer: https://mcmap.net/q/634386/-is-there-a-way-to-do-drag-and-drop-re-ordering-of-the-preview-elements-in-a-dropzone-js-instance – Exchangeable

Answer 1

Html will be look like this:

<div id="imageUpload" class="dropzone mt-2"></div>

And add this code in js

$(".dropzone").sortable({
    items:'.dz-preview',
    cursor: 'grab',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function () {
      var queue = myDropzone.getAcceptedFiles();
      newQueue = [];
      $('#imageUpload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {           
            var name = el.innerHTML;
            queue.forEach(function(file) {
                if (file.name === name) {
                    newQueue.push(file);
                }
            });
      });
      myDropzone.files = newQueue;
    }
});

Hope that this will work.

Frederickson