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>

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.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with…

Leave a Reply

Your email address will not be published. Required fields are marked *