DnD Zone

If you are looking for a simple script to have a drop zone for input file for your form, DnD Zone can be of your help. Otherwise, use libraries like DropzoneJS, jQuery File Upload. DnD Zone is just 2.5KB gzip and no dependencies. It will only work on modern browsers.

Download

Getting Started
Usage
Options and Methods

Getting Started

Installing DnD Zone is very simple and easy. You just include the dnd-zone.js

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

Important Note : DnD Zone does not handle file uploads on the server. It only adds the file(s) dropped in the drop zone to input file element. So, You have to implement the code to receive and store the file(s) by yourself.

Usage

DnD Zone does not create the HTML structure for the drop zone. It does not also apply any styles.

Create the drop zone exactly like the snippet below and apply your own styles.

<!-- HTML  -->
<div class="dndzone" id="dndzone-example">
    <div class="dndzone-area">
        <!-- This is the drop zone area  -->
        Drop files or Click here to select files. 
    </div>
    <input type="file" class="dndzone-input">
</div>

// Javascript
document.addEventListener("DOMContentLoaded", function(event) {
    new DnDZone(document.getElementById('dndzone-example'), {
        // Options here
    });
});

Now, Lets create a drop zone using Bootstrap’s utilities classes.

<div class="dndzone" id="dndzone-bootstrap">
    <div class="dndzone-area bg-dark text-white text-center shadow-lg p-5">
    	<p class="mb-4">
            <i class="fad fa-upload fa-3x"></i>
    	</p>
    	<h3>Drop files or Click here to select files.</h3>
    	<p class="mb-0">Only images are allowed.</p>
    </div>
    <input type="file" accept="image/*" class="dndzone-input" name="dndzone-example" />
</div>

// Javascript
document.addEventListener("DOMContentLoaded", function(event) {
    new DnDZone(document.getElementById('dndzone-bootstrap'));
});

This is how it looks like –

Drop files or Click here to select files.

Only images are allowed.

Options and Methods

Available options and methods :

Name	type	default	description
accept	String	null	Specify what file types the user can pick from the file input dialog box
triggerChange	Boolean	false	Whether you want the ‘change’ event to be triggered on file(s) drop/selection.
beforeFilesAdded	callback	function(files){}	The callback that will be invoked before the selected files are added to input file element. But you must return the files array. Useful if you want to add more verification
afterFilesAdded	callback	function(files){}	The callback that will be invoked after the selected files are added to input file element.