Customizable Multi-file Uploader – SlashUploader

Category: Form , Javascript | August 7, 2023
Views Total:230 views
Official Page:Go to website
Last Update:August 7, 2023


Customizable Multi-file Uploader – SlashUploader


SlashUploader is a simple, flexible, cross-browser, highly customizable file uploader written in pure JavaScript.

Main features:

  • Supports both single and multiple file upload.
  • Drag and drop file selection.
  • Chunk Upload is supported as well.
  • Image preview before uploading.
  • Restricts file types.
  • Visual upload progress with a progress bar.
  • File validation.
  • Useful options and event handlers

Basic usage:

Import the SlashUploader’s JavaScript and CSS files into the html.

<script src='SlashUploader.min.js'></script> 
<link href='SlashUploader.min.css' rel='stylesheet'>

Create a placeholder element for the file uploader.

<div id='example'></div>

Initialize the SlashUploader to generate a default file uploader.

var myUploader = new SlashUploader (document.getElementById("example"));

All possible options to customize the file uploader.

// "image/*", "video/*", "text/html", ".csv, application/", etc
acceptOnlyFilesTypes: null,
// allowed file extensions
// e.g. ["mp4", "ogg"];
allowedFilesExtensions: null,
// max file size in kb
allowedMaxFileSize: null,
/* force the use of a specific media element to upload the file from.
   Avaliable values are -
   camera - Capture media directly from the device's camera.
   camcorder - Capture media directly from the device's video camera.
   microphone - Capture media directly from the device's microphone.
   filesystem - Capture media directly from the device's gallery.
   user - Capture media directly from the user-facing camera and/or microphone.
   environment - Capture media directly from the outward-facing camera and/or microphone.
capture: null,
// If value is set to true, the plugin is being wraped under the selected DOM element.
customHTML: false,
// custom validation function
customValidation: null,
// disable user interaction
disabled: false,
// in ms
displayErrorDuration: 4500, 
// recieve files metadata upon selection
doGetFileMetadata: true,
// enable drag and drop
enableDropFiles: true,
// enable cancel button
enableCancelButton: true,
// enable delete button
enableDeleteButton: true,
// chunk upload instead of stream upload, in kb
fileSizeToForceChunksUpload: 500000,
// the HTML template to show the uploaded files
groupedUploadedFilesHtml: '{{total_files}} files uploaded',
// whether to display uploaded files in a single row
groupUploadedFilesResult: false,
// uploader height
height: 80,
// iframe gateway
iframeGateway: 'SlashUploader/iframe_gateway.html',
// maximum characters length to display for a file name
maxFileChars: 22,
// maximum amount of files
maxFiles: 9999,
// null, 'inline', 'bar'
progressAnimationType: 'inline',
// reset file list after upload
resetFilesOnEachUpload: true,
// retry timeout in ms
retryTimeout: 1500,
// idle / uploading / uploaded / canceled / error
status: "idle",
// retry times
retryTimes: 10,
// enable RTL
rtl: false,
// uploadChunk - Script to upload file chunk, if chunks upload is being used.
// combineChunks - Script to combine chunks back to a file, if chunks upload is being used.
// uploadStream - Script to upload file as stream, if stream upload is being used.
// uploadThroughIframe - Script to upload file using Iframe gateway, if Iframe upload is being used.
// fileNameVariableName - File name variable to expect back from server, for a successful upload.
// fileUrlVariableName - File URL variable to expect back from server, for a successful upload.
// errorVariableName - Error variable to expect back from server, if server script failed.
serverScripts: {},
// shows detailed error from server
showDetailedErrorFromServer: true,
// shows a rectangle when the uploader is focused
showFocusRect: false,
// HTML template
uploadedFileHtml: '<a href='{{current_file_path}}' target='_blank'>{{current_file_name}}</a>',
// 'none', 'default', 'below', or 'beside'
uploadedFilesPosition: '',
// template callback function to display the uploaded file.
uploadedFileTemplate: null,
// gets or sets the current file list
uploadedFiles: null,
// allows file chunks
uploadFileInChunks: true,
// gets or sets the current files list that was uploaded
value: null

Event handlers.

files - Array of files object, with each object containg:
• file - Native file object.
• name - File name.
• extension - File extension.
• type - File type.
• size - File size, in KB.
• width - File width in pixels, if selected file is image or video.
• height - File height in pixels, if selected file is image or video.
• duration - Media file length in seconds.
• rotation - Image rotation, based on the camera orientation when the picture was captured.
• continueUpload - Function that must be triggered in order to continue with the uploading proccess.
myUploader.onBeforeFilesUpload = function(files, continueUpload) {
    url: "",
    data: {selected_files: JSON.stringify(files)},
    success: function () {
myUploader.onCanceled = function () {
  console.log ("Canceled");
myUploader.onError = function (errors) {
  console.log (errors);
myUploader.onFileDeleted = function (deletedFile, files) {
  console.log ("Deleted file:", deletedFile);
  console.log ("Remaining files:", files);
myUploader.onFilesProgress = function (curUploadingFileProgress, curUploadingFileIndex, totalFilesToUpload) {
  var text = "Uploaded "+Math.floor(curUploadingFileProgress*100)+"% (file "+(curUploadingFileIndex+1)+"/"+totalFilesToUpload+")";
  console.log (text);
myUploader.onFilesSelected = function (files) {
  console.log (files);
myUploader.onFilesUploaded = function (files) {
  for (var i=0; i&lt;files.length; i++) {
      var file = files[i];
      console.log ("File number "+(i+1));
      console.log ("Name: "+file[this.serverScripts.fileNameVariableName]);
      console.log ("URL: "+file[this.serverScripts.fileUrlVariableName]);



  • Added “status” parameter


  • v1.5.8


  • v1.5.7

You Might Be Interested In:

Leave a Reply