jQuery ajax file uploader widget!

DirectCode | February 13, 2020 | JavaScript, jQuery, Plugins, Tools | No Comments

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.

A lightweight and very configurable JS/jQ uploader

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