> For the complete documentation index, see [llms.txt](https://mobius-studios.gitbook.io/selectable/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobius-studios.gitbook.io/selectable/getting-started/demos/dropzone-integration.md).

# Dropzone Integration

```js
/* --------- 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");
            }
        }
    }
});    
```

<br>

{% embed url="<https://codepen.io/Mobius1/pen/jQoXOw>" %}