Dropzone Integration

/* --------- DROPZONE INSTANCE --------- */
const DROPZONE = new Dropzone("#dropzone", {
    autoProcessQueue: false,
    clickable: '#addFiles',
});

/* --------- SELECTABLE INSTANCE --------- */
const SELECTABLE = new Selectable({
    appendTo: "#dropzone",
    ignore: "[data-dz-remove]", // stop remove button triggering selection
});

/* --------- SELECTABLE EVENTS --------- */
SELECTABLE.on("end", (e, selected) => {
    // show the "removeFiles" button if we have selected files
    removeFiles.classList.toggle("active", selected.length);
});

/* --------- DROPZONE EVENTS --------- */
DROPZONE.on("addedfile", function(file) {
    const el = file.previewElement;
    
    // add element to Selectable instance when added by Dropzone
    SELECTABLE.add(el);	
});

DROPZONE.on("removedfile", function(file) {
    const el = file.previewElement;
    
    // remove element from Selectable instance when removed by Dropzone
    SELECTABLE.remove(el);
});

/* --------- BUTTONS --------- */
const removeFiles = document.getElementById("removeFiles");

removeFiles.addEventListener("click", e => {
    // get files
    const files = DROPZONE.files;
    
    if ( files.length ) {
        for ( const file of files ) {
            // get the item instance from Selectable
            const el = SELECTABLE.get(file.previewElement);
            
            // if it's selected, then remove it.
            // Dropzone is set to listen to "removedfile" and 
            // will remove it from the Selectable instance
            if ( el.selected ) {
                DROPZONE.removeFile(file);
                
                // hide the button
                removeFiles.classList.remove("active");
            }
        }
    }
});