jQuery ajax file uploader widget!

A lightweight and highly configurable jQuery plugin for async file uploading via Ajax! The jQuery ajax file uploader plugin includes support for queues, progress tracking and drag and drop.

Solution of jQuery ajax file uploader

A jQuery plugin for file uploading using Ajax.

Very configurable and easy to adapt to any Frontend design, and very easy to work along side any backend logic. The focus will be modern browsers, but also providing a method to know when the plugin is not supported. The idea is to keep it simple and lightweight.

Basic Javascript knowledge is necessary to setup this plugin: how to set settings, callback events, etc.

Setup

# NPM
npm install dm-file-uploader --save

# Bower
bower install dm-file-uploader --save

Sample

This is the simple html markup. The file input is optional but it provides an alternative way to select files for the user(check the online demo to see how to hide/style it).

<div id="drop-area">
  <h3>Drag and Drop Files Here<h3/>
  <input type="file" title="Click to add Files">
</div>

Initialization

$("#drop-area").dmUploader({
  url: '/path/to/backend/upload.asp',
  //... More settings here...
  
  onInit: function(){
    console.log('Callback: Plugin initialized');
  }
  
  // ... More callbacks
});

Additionally, after initialization you can use any of the available Methods to interact with the plugin.

License: MIT

GitHub

https://github.com/danielm/uploader

Demo

https://danielmg.org/demo/java-script/uploader/basic

See also

Smart Wizard – a jQuery form wizard plugin

JavaScript file upload library – filepond JS, with adapters for Vue and React JS!

Dropzone.js – drag and drop JavaScript file uploader

Responsive HTML tables on all devices with jQuery table-shrinker

Human readable file size in JavaScript

AJAX PayPal – shopping cart jQuery plugin

Enjoy!