AJAX-enabled File Uploader With Live Preview - jQuery uploader.js

A lightweight and AJAX-enabled file uploader plugin that provides a convenient solution for uploading single or multiple files via AJAX.

It allows the users to select files from local, preview their files within the browser, and automatically upload those files upon selection.

See Also:

• 10 Best File Upload Libraries In jQuery And Vanilla JavaScript

How to use it:

1. Load the jQuery Uploader plugin's files in the document.

<!-- Font Awesome Iconic Font Is Required -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css">

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Uploader Files -->
<link rel="stylesheet" href="./css/jquery.uploader.css">
<script src="./dist/jquery.uploader.min.js"></script>

2. Create an input field for the file uploader.

<input type="text" id="example" value="" />

3. Initialize the plugin to create a basic file uploader.

$("#example").uploader({
  // options
})

4. Enable multi-file upload.

$("#example").uploader({
  multiple: true,
})

5. Set the upload mode: 'url', 'file', or 'custom'.

$("#example").uploader({
  mode: Uploader.mode.file,
})

6. Enable auto upload. Default: true.

$("#example").uploader({
  autoUpload: false,
})

7. Define pre-selected files.

$("#example").uploader({
  defaultValue: [
    {
      name: "jquery",
      url: "/path/to/jquery.jpg"
    }, {
      name: "script",
      url: "/path/to/script.png"
    }
  ],
})

8. Config ajax upload.

$("#example").uploader({
  ajaxConfig: {
    url: "",
    method: "post",
    paramsBuilder: function (uploaderFile) {
      let form = new FormData();
      form.append("file", uploaderFile.file)
      return form
    },
    ajaxRequester: function (config, uploaderFile, progressCallback, successCallback, errorCallback) {
      $.ajax({
        url: config.url,
        contentType: false,
        processData: false,
        method: config.method,
        data: config.paramsBuilder(uploaderFile),
        success: function (response) {
          successCallback(response)
        },
        error: function (response) {
          console.error("Error", response)
          errorCallback("Error")
        },
        xhr: function () {
          let xhr = new XMLHttpRequest();
          xhr.upload.addEventListener('progress', function (e) {
              let progressRate = (e.loaded / e.total) * 100;
              progressCallback(progressRate)
          })
          return xhr;
        }
      })
    },
    responseConverter: function (uploaderFile, response) {
      return {
        url: response.data,
        name: null,
      }
    },
  },
})

9. Event handlers.

$("#example").uploader()
.on("uploader-init", function() {
  // do something
},
.on("before-upload", function(waitUploadFiles) {
  // do something
},
.on("uploading", function(file) {
  // do something
},
.on("upload-success", function(file, data) {
  // do something
},
.on("upload-error", function() {
  // do something
},
.on("file-add", function() {
  // do something
},
.on("file-remove", function() {
  // do something
},

10. API methods.

// upload files manually
upload();

// clear all files
clean();

// get all files
uploadFiles();

---

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