Hello all you fantastic stack individuals.

Im using Dropzone to allow for a gallery upload tool. I've also adapted the Dropzone to use jquery UI sortable to allow the user to reorganise the uploaded images. However, when the user sorts their images, the sortable function does not affect the array of images in the Dropzone.files array.

My Initial Dom

<div class="item" id="1234">
    <img src="image.jpg">
</div>
<div class="item" id="5678">
    <img src="image2.jpg">
</div>
<div class="item" id="9112">
    <img src="image3.jpg">
</div>

The resulting Dropzone array once the images have been uploaded

Dropzone.files:[
    0:[
        id: 1234,
        url:image.jpg
    ],
    1:[
        id: 5678,
        url:image2.jpg
    ],
    2:[
        id: 9112,
        url:image3.jpg
    ]
];

This is the callback function I use when the DOM is sorted using jQuery UI Sortable. Sortable has no effect on the array of images in the Dropzone object. I need to be able to distinguish between the first and last images in this callback function. Either by reordering the files array to match that of the DOM, or by finding a way to check if the current iteration is the first file in the DOM. It's important to note that I need all of the additional information from the files array such as width, height, type and size that are not included in my array example.

callback_function(files){

    //need to re order the files array here to match the DOM order!
    
    jQuery.each(files, function(index, file){

        index == 0 ? do_first_image_validation(file) : do_all_other_images_validation(file);

    }

}