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">
    </span>
    <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>
    <button id="ssi-clearBtn" class="ssi-hidden ssi-button info">Clear</button>
  </div>
  <div id="ssi-previewBox" class="ssi-uploadBox ssi-previewBox ssi-dropZonePreview ssi-dropZone">
    <div id="ssi-DropZoneBack">Drag n Drop</div>
  </div>
</div>

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

$('.ssi-upload').ssi_uploader({
  url: 'upload.php'
});

5. Plugin's default customization options:

$('.ssi-upload').ssi_uploader({

  // 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) {
      alert(msg);
    },
    success: 'success',
    error: 'error'
  }
  
});

6. Callback functions.

$('.ssi-upload').ssi_uploader({

  // 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.

$('.ssi-upload').ssi_uploader({

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

});

Changelog:

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.

2017-03-23

• Add responsedata access to onEachUpload callback

2017-03-22

• Add jquery settings to pass through beforeEach cl

2017-02-07

• fixed a bug when delete picture

2016-12-08

• now display messages if the response validation is success closes

2016-11-01

• fix form submit bug

2016-10-31

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

2016-10-30

• add fileInfo.responseMsg param to onEachUpload callback

2016-07-21

• remove an unnecessary css rule

2016-07-19

• 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. 

2016-07-13

• fix allowed error

2016-07-03

• 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.