How to make use of it:

1. Download the bundle and include the next information on the web page.

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

2. Create a normal file input on the web page.

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

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

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

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

4. The HTML structure of the drag and drop zone needs to 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 individual 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;
}

Drag And Drop File Upload Zone, SimpleDropit Plugin/Github, drag and drop file upload with submit button, html5 drag and drop file upload jquery

See Demo And Download