Easy Drag'n'Drop AJAX Uploader Plugin For jQuery - ssi-uploader.js

File Size: 122 KB
Views Total: 11479
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Drag'n'Drop AJAX Uploader Plugin For jQuery - ssi-uploader.js

ssi-uploader.js is an easy, customizable, jQuery dependent uploader which allows you to upload multiple allowed files with previews into the web server via AJAX requests. Drag'n'drop, i18n, callbacks are supported as well.

Basic usage:

1. First you need to load the latest version of jQuery library in the html document.

<script src="http://code.jquery.com/jquery.min.js"></script>

2. Then download and load the ssi-uploader plugin's JavaScript & CSS files in the document.

<link href="ssi-uploader.min.css" rel="stylesheet">
<script src="ssi-uploader.min.js"></script>

3. The next step is to create an upload button together with the preview & drag'n'drop area on the webpage.

<div class="ssi-uploader">
  <div class="ssi-buttonWrapper"><span class="ssi-InputLabel">
    <button class="ssi-button success">Choose files</button>
    <input type="file" multiple id="ssi-upload" class="ssi-uploadInput">
    <button id="ssi-abortBtn" class="ssi-button error ssi-cancelAll ssi-hidden"><span class="inBtn">Abort </span></button>
    <button id="ssi-uploadBtn" class="ssi-button success ssi-hidden"><span class="ssi-btnIn">Upload&nbsp;</span>
    <div id="ssi-up_loading" class="ssi-btnIn"></div>
    <button id="ssi-clearBtn" class="ssi-hidden ssi-button info">Clear</button>
  <div id="ssi-previewBox" class="ssi-uploadBox ssi-previewBox ssi-dropZonePreview ssi-dropZone">
    <div id="ssi-DropZoneBack">Drag n Drop</div>

4. At last, you need to call the function on the top element as this:

  url: 'upload.php'

5. Plugin's default customization options:


  // allows duplicates
  allowDuplicates: false,

  // The utl to which the ajax request is sent.
  url: '',

  // Sends extra data with the request.
  data: {},

  // en, gr
  locale: 'en',

  // Enables/disables the file preview.
  preview: true,

  // Enables/disables drag and drop.
  dropZone: true,

  // How many files are allowed per upload.
  maxNumberOfFiles: '',

  // Setting up the response validation, ssi-uploader will be able to handle erros and display them.
  // validationKey: {String||Object} Defines the validation key of the response. For
  // resultKey: {String} Defines the validation key of the response.
  // success: {String} Defines the success key of the response.
  // error: {String} Defines the error key of the response.
  responseValidation: false,

  // If true the upload will continue normally even if there is an error in a callback function. 
  // If false the upload will aborted, if it's possible, and will console.log the errors.
  ignoreCallbackErrors: false,

  // Boolean or a function
  // Transform file to form data
  transformFile: true,

  // The maximum size of each file.
  maxFileSize: null,

  // is in form
  inForm: false,

  // Extends the default options of $.ajax function:
  // https://api.jquery.com/jquery.ajax/
  ajaxOptions: {},

  // The files allowed to be uploaded. 
  allowed: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],

  // The method that will be used to display the messages.
  errorHandler: {
    method: function (msg) {
    success: 'success',
    error: 'error'

6. Callback functions.


  // executed when the upload process end
  onUpload: function () {

  // executed when each file finishes to uploading
  onEachUpload: function () {

  // executed before an upload process starts
  beforeUpload: function () {

  // executed just before each file starts to uploading
  beforeEachUpload: function () {


7. Event handler.


  errorHandler: {
    method: function (msg) {
    success: 'success',
    error: 'error'



v1.4.1 (2019-11-15)

  • Fix bug in transform file

v1.4.0 (2019-10-24)

  • Add transformFile option

v1.3.11 (2018-03-06)

  • Add allowDuplicates option so you can upload files with the same name.


  • Add responsedata access to onEachUpload callback


  • Add jquery settings to pass through beforeEach cl


  • fixed a bug when delete picture


  • now display messages if the response validation is success closes


  • fix form submit bug


  • You can define now the input name direct to the element.


  • add fileInfo.responseMsg param to onEachUpload callback


  • remove an unnecessary css rule


  • New option ignoreCallbackErrors (Boolean, default:false): If true the upload will continue normally even if there is an error in a callback function. If false the upload will aborted when it is possible and will console.log the errors.
  • New feature that it shows some details about the upload action (number of pending, number of completed and number of in progress files).
  • Fix a bug in multiple file upload.
  • Change the tooltip logic and some css.
  • New method to throw custom in BeforeEachUpload callback by throwing an Error. 


  • fix allowed error


  • fix no preview box height

This awesome jQuery plugin is developed by ssbeefeater. For more Advanced Usages, please check the demo page or visit the official website.