File Drop Zone For Uploader – DnD Zone

A JavaScript library that converts a file input into a file drop zone where you can select files to be uploaded via drag and drop.

How to use it:

1. Load the DnD Zone JavaScript library in the page.

<script src="dnd-zone.js"></script>

2. Insert a file input into the drop zone.

<div class="dndzone" id="dndzone-example">
  <div class="dndzone-area">
     Drop files or Click here to select files. 
  </div>
  <input type="file" class="dndzone-input" />
</div>

3. Initialize the DnD Zone and done.

new DnDZone(document.getElementById('dndzone-example'));

4. Apply your own styles to the drop zone.

.dndzone-area {
  /* styles here */
}

5. Defines the file types the file input should accept.

<input type="file" accept="image/*" class="dndzone-input" />

// or
new DnDZone(document.getElementById('dndzone-example'),{
    accept: 'image/*'
});

6. Determine whether to trigger the change event when files are dropped or selected. Default: false.

new DnDZone(document.getElementById('dndzone-example'),{
    triggerChange: true
});

7. Trigger functions before/after files are dropped or selected.

new DnDZone(document.getElementById('dndzone-example'),{
    afterFilesAdded: function(files){
      console.log(files);
    },
    beforeFilesAdded: function(files){
      console.log(files);
    },
});