A Drag-n-Drop File Upload Vanilla JS Library | SimpleDropit

SimpleDropit is a simple vanilla js library for uploading and dropping files, easy to use across modern browsers.

drag and drop file upload, drag and drop multiple file upload, drag and drop multiple file upload bootstrap, drag and drop folder upload javascript

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

Official Website(nishantk02): Click Here

This superior jQuery/javascript plugin is developed by nishantk02. For extra Advanced usage, please go to the official website.

Share