Customizable Multi-file Uploader – SlashUploader

Category: Form , Javascript | December 23, 2018
Author: alonslash
Views Total: 393
Official Page: Go to website
Last Update: December 23, 2018
License: MIT

Preview:

Customizable Multi-file Uploader – SlashUploader

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,

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

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

// 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 uploaded files
showUploadedFiles: true,

// HTML template
uploadedFileHtml: '<a href='{{current_file_path}}' target='_blank'>{{current_file_name}}</a>',

// gets or sets the current file list
uploadedFiles: null,

// allows file chunks
uploadFileInChunks: true,

Event handlers.

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:

12/23/2018

  • v1.5.5

You Might Be Interested In:


Leave a Reply