Small Custom Drag'n'drop File Upload Plugin For jQuery

Yet another custom file upload jQuery plugin that makes it easy to add drag and drop file uploading to your web application. If you're looking to upgrade your file inputs, this plugin is a great open-source choice. 

Once you've selected files, the plugin displays a handy file info table below the drag'n'drop area. You will get a comprehensive overview, including previews, file sizes, and types, all at a glance. And for those moments when you change your mind about an upload? No problem. You can delete any selected file directly from the table.

How to use it:

1. Load the needed jQuery library and Material Icons in the document.

<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined">

<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>

2. Download the plugin and place the fileUpload.js script after jQuery.

<script src="fileUpload/fileUpload.js"></script>

3. Don't forget to import the core stylesheet.

<link rel="stylesheet" href="fileUpload/fileUpload.css">

4. Create an empty DIV container to hold the custom file uploader.

<div id="fileUpload"></div>

5. Call the function fileUpload on the DIV container you just created and the plugin will do the rest.

$(function(){ 
  $("#fileUpload").fileUpload();
});

6. The generated HTML structure should be like these:

<div id="fileUpload" class="file-container">
  <label for="fileUpload-1" class="file-upload">
    <div>
      <i class="material-icons-outlined">cloud_upload</i>
      <p>Drag &amp; Drop Files Here</p>
      <span>OR</span>
      <div>Browse Files</div>
    </div>
    <input type="file" id="fileUpload-1" name="[]" multiple="" hidden="">
  </label>
</div>

---

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