HTML5 Drag and Drop File Upload using jQuery

Category: Text & Input | February 28, 2020
Author: Yoshikazu Kaneta
Official Page: Go to Website
Last Update: March 3, 2020
License: MIT

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.

Option Default Type Description
url “” String It defines the backend URL to handle the upload form.

Example:

$('#basic').simpleUpload({
	url : "",
});
method “post” String The form method attribute to handle the request. Possible options are: “post” and “get”.

Example:

$('#basic').simpleUpload({
	method : "post",
});
dropZone ‘#drop_zone’ String The selector for drag and drop element.

Example:

$('#basic').simpleUpload({
	dropZone : '#drop_zone',
});
progress ‘#progress’ String The selector for the progress bar.

Example:

$('#basic').simpleUpload({
	progress : '#progress',
});
dataType ‘application/json’ String This option defines the data type.

Example:

$('#basic').simpleUpload({
	dataType : 'application/json',
});
async true Boolean Enable/disable the asynchronous feature.

Example:

$('#basic').simpleUpload({
	async : true,
});
maxFileNum 4 Number The number of files to allow in the upload form. So, you can control maximum files through this option.

Example:

$('#basic').simpleUpload({
	maxFileNum : 4,
});
maxFileSize 10 * 1024 * 1024 Number It defines the maximum file size in bytes.

Example:

$('#basic').simpleUpload({
	maxFileSize : 10 * 1024 * 1024,
});
allowedFileName /\.txt$/ String Defines the allowed file name. You can pass string value in this option. Similarly, you can pass regular expressions for the filename.

Example:

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

You Might Be Interested In:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.