HTML5 Drag and Drop File Upload using jQuery

Category: Text & Input | February 28, 2020
HTML5 Drag and Drop File Upload using jQuery
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.

OptionDefaultTypeDescription
url“”StringIt defines the backend URL to handle the upload form.

Example:

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

Example:

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

Example:

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

Example:

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

Example:

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

Example:

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

Example:

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

Example:

$('#basic').simpleUpload({
	maxFileSize : 10 * 1024 * 1024,
});
allowedFileName/\.txt$/StringDefines 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 May Also Like

Leave a Comment