I am using dropzone.js. I allow the upload of multiple Images and I display the Thumbnails as a Preview. I now want to be able to choose a "Default" Image which will always be displayed as the first image on different pages.
I first thought to use the "addedfile" event to have the Image or a Button below the Image clickable. When clicked on the Image or the Button I would save the Name of the Image which dropzone saves in the "alt" tag and write this in a Hidden input element, but this would cause a Problem if someone uploads 2 Images with the same Name. So I skipped this idea.
My second solution was then to combine dropzone with jQuery sortable(). My aim is that I upload some images, lets say 3. I see the Thumbnails in my Preview. The image on the first position file[0] will always be the "Default" image. So when I press finally the "Save Post" I can set the flag "Default" for the first File[0] Element. Back to the Preview... With the help of sortable(), I am able to move the images around and can therefore change which Image should be on the first position see the code below. (The code is outside of the Dropzone setup). The Images are sortable, so that works.
But, how would I now adjust the HTML5 File Object to show the new position?? This is where I am stuck. Is it possible to re-order the File Object or what other options would I have to achieve my task? I am running out of ideas, so I am hoping that I could re-order the File Object in my below update function from sortable().
UPDATE 1: I also thought about renaming the file.name as well with my own unique name, but found out that this is not possible since you only have "read" access of the file object....
UPDATE 2: Ok, after some more research I wanted to try to access the HTML5 File Object. I thought this is the first step. I added the id attribute to the hidden file element. I now try to access the File Element, in my update function from sortable but the test: alert (files.length); always returns 0. What to I do wrong here?
<script>
$(function() {
$("#dropzonePreview").sortable({
items:'.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '#dropzonePreview',
distance: 20,
tolerance: 'pointer',
update: function(e, ui){
// Added below Code
// fileInput is an HTML input element: <input type="file" id="file" multiple>
var fileInput = document.getElementById("file");
// files is a FileList object (similar to NodeList)
var files = fileInput.files;
var file;
alert (files.length);
// loop trough files
for (var i = 0; i < files.length; i++) {
// get item
file = files.item(i);
//or
file = files[i];
alert(file.name);
}
},
});
});
</script>
