Drag And Drop File Upload Zone In JavaScript - SimpleDropit

SimpleDropit is a JavaScript plugin that transforms any standard file input into a customizable, user-friendly, drag'n'drop zone for file uploader.

Can be implemented in either jQuery or Vanilla JavaScript.

How to use it:

1. Download the package and include the following files on the page. Note that jQuery library is OPTIONAL.

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

2. Create a standard file input on the page.

<input type="file" name="files[]" id="example" multiple />

3. Initialize the SimpleDropit plugin on the file input and done.

// jQuery
new SimpleDropit($('#example')[0]);

// Vanilla JS
new SimpleDropit(document.getElementById('example'));

4. The HTML structure of the drag and drop zone should be like these:

<div class="sd-box sd-advanced-upload">
  <div class="sd-box-wrapper">
    <div class="sd-label-wrapper">
      <span class="sd-box-dragndrop">Drop file here /&nbsp;</span>
      <span class="sd-box-file-name"></span>
      <label class="sd-label">Browse <span class="sd-box-browse-file">File</span></label>
      <input type="file" name="files[]" id="example" multiple=""></div>
  </div>
</div>

5. Feel free to override the default CSS to create your own styles:

.sd-box {
  background-color: #ffffff;
  position: relative;
  padding: 25px 20px;
  width: 100%;
  text-align: center;
  border: 1px solid #EBE9E9;
  border-radius: 2px;
  line-height: 18px;
}

---

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