Customizable Multi-file Uploader – SlashUploader

Preview:

Description:

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/vnd.ms-excel", 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) {
  $.ajax({
    url: "https://mydomain.com/test_files.php",
    data: {selected_files: JSON.stringify(files)},
    success: function () {
      continueUpload();
    }
  });
}
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<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]);
  }
};

Changelog:

01/16/2025

• Bugfixes

01/12/2025

• v1.5.9

08/07/2023

• Added “status” parameter

05/24/2020

• v1.5.8

10/29/2019

• v1.5.7