HTML5 Drag and Drop File Upload using jQuery

The “simple-upload” is a lightweight and well-developed jQuery file uploader plugin. This jQuery plugin allows you to create HTML5 based drag & drop file upload functionality. Generally, the plugin handles multiple files before upload. Besides this, you can fully control its uploading behavior through its configuration options.

Moreover, the plugin also supports file validation, progress bar, and file type, etc. You can easily enable/disable these options in configurations. Similarly, you can also customize the file upload form with additional CSS.

How to Create HTML5 Drag & Drop File Upload

The “simple-upload” plugin requires jQuery, Bootstrap CSS ( that is optional for basic layout) and Font Awesome Icons. So, load the jQuery, Bootstrap, and Font Awesome CSS in your HTML page in order to create a drag & drop file upload form.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/flatly/bootstrap.min.css">

<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Now, create a basic HTML structure for file upload form just like below:

<div class="container">
   <input type="file" name="file" multiple="true" id="basic">
   <div id="basic_drop_zone" class="dropZone mt-3 mb-3">
      <div><i class="fas fa-upload"></i> Drop files here</div>
   </div>
   <div id="basic_progress"></div>
   <div id="basic_message" class="alert alert-danger"></div>
</div>

Finally, call the plugin in jQuery document ready function (with the following basic configuration options) to active the HTML5 drag & drop file upload.

$(document).ready(function(){
          $('#basic').simpleUpload({
            url: '/post',
            method: 'post',
            params: { param: 'test' },
            dropZone: '#basic_drop_zone',
            progress: '#basic_progress',
            $('#basic_message').prepend('<p>fail: ' + file.name + '</p>');
          });
});

Plugin Configuration Options

The following are some available configuration options to customize the simple-upload plugin.

$('#basic').simpleUpload({
	url : "",
});

$('#basic').simpleUpload({
	method : "post",
});

$('#basic').simpleUpload({
	dropZone : '#drop_zone',
});

$('#basic').simpleUpload({
	progress : '#progress',
});

$('#basic').simpleUpload({
	dataType : 'application/json',
});

$('#basic').simpleUpload({
	async : true,
});

$('#basic').simpleUpload({
	maxFileNum : 4,
});

$('#basic').simpleUpload({
	maxFileSize : 10 * 1024 * 1024,
});

$('#basic').simpleUpload({
	allowedFileName : /\.txt$/,
});