Drag And Drop File Uploader With Preview - Imageuploadify

File Size: 12.4 KB
Views Total: 46430
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Drag And Drop File Uploader With Preview - Imageuploadify

Imageuploadify is a jQuery & Bootstrap plugin that converts the normal file input into a drag'n'drop multi-file upload control with files (images) preview support. You can either browse for multiple files or drag and drop files into the control.

How to use it:

1. Include the needed jQuery library, Twitter's Bootstrap and Font Awesome icon font on the html page.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="font-awesome.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Put the jQuery imageuploadify plugin's files in the page.

<script" src="imageuploadify.js"></script>
<link href="dist/imageuploadify.min.css" rel="stylesheet">

3. Call the function imageuploadify() on the regular file input and the plugin will do the rest.

<input type="file" multiple>

4. Set the file types allowed using the accept attribute like this:

<input type="file" accept=".xlsx,.xls,image/*,.doc,audio/*,.docx,video/*,.ppt,.pptx,.txt,.pdf" multiple>

Change log:


  • Add minify version, separate CSS from JS, clean code, fix issues


  • Submitting form redirect to original redirected location


  • Full responsive, fix drag'n drop issue with Chrome


  •  Add onsubmit form to add drag'n drop files, fixes some issues


  • Fix issues (missing event obj and button should not submit form)

This awesome jQuery plugin is developed by wpic. For more Advanced Usages, please check the demo page or visit the official website.