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 />


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: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) {

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

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

dropzone.addEventListener('drop', function(e) {
    var files = e.dataTransfer.files;
    var dataTransfer = new DataTransfer();

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

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

dropzone.addEventListener('click', function(e) {
}, 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
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.