Create a drag & drop zone for input file element

Having a drag and drop zone for file uploads is a very common thing these days, and it’s very user friendly. So, Let’s create a drag & drop zone for input file element without any external libraries. But it will work on modern browsers only.

First, we create the markup for the drop zone area using a div element with an input file element inside of it.

<div class="dropzone" id="dropzone">
 <img class="dropzone-icon" src="https://wickedev.com/wp-content/uploads/2021/02/cloud-uploading.png" />
    
 Drop files or Click here to select files to upload.
 <input type="file" name="files" class="dropzone-input" multiple />
</div>

 

Its time to add some styles to make it look like a drop zone area. We also hide the input file element, because we do not want the users to see the input field.

.dropzone {
 border: 0.2rem dashed #6583fe;
 padding: 2rem;
 border-radius: 0.25rem;
 background-color: #fff;
 text-align: center;
 font-size: 1.5rem;
 transition: 0.25s background-color ease-in-out;
 cursor: pointer;
}

.dropzone-dragging,
.dropzone:hover {
 background-color: #f3f5ff;
}

.dropzone-icon {
 max-width: 75px;
 display: block;
 margin: 0 auto 1.5rem;
}

.dropzone-input {
 display: none;
}

 

Now that we’ve our markup and styles are ready, we add the javascript to make our drop zone functional.

var dropzone = document.getElementById('dropzone');
var dropzone_input = dropzone.querySelector('.dropzone-input');
var multiple = dropzone_input.getAttribute('multiple') ? true : false;

['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function(event) {
    dropzone.addEventListener(event, function(e) {
        e.preventDefault();
        e.stopPropagation();
    });
});

dropzone.addEventListener('dragover', function(e) {
    this.classList.add('dropzone-dragging');
}, false);

dropzone.addEventListener('dragleave', function(e) {
    this.classList.remove('dropzone-dragging');
}, false);

dropzone.addEventListener('drop', function(e) {
    this.classList.remove('dropzone-dragging');
    var files = e.dataTransfer.files;
    var dataTransfer = new DataTransfer();

    Array.prototype.forEach.call(files, file => {
        dataTransfer.items.add(file);
        if (!multiple) {
            return false;
        }
    });

    var filesToBeAdded = dataTransfer.files;
    dropzone_input.files = filesToBeAdded;
}, false);

dropzone.addEventListener('click', function(e) {
    dropzone_input.click();
}, false);

 

Now, you can put it inside any form element and write server side codes to handle the uploads. 🙂

You can see it in action here:

See the Pen
PobNNwE by Zahed Kamal (@zahedkamal87)
on CodePen.

 

There are so many popular drag and drop file uploader libraries, eg – DropzoneJS, jQuery File Upload. But, If you are looking for a tiny script to create a drop zone, then try DnD Zone.