Advanced Drag'n'drop File Uploader - jQuery 5x5jqpi.js

5x5jqpi.js is an advanced drag'n'drop file uploader built on top of jQuery and Bootstrap framework.

Features:

• Choose files via drag and drop.
• Select multiple files at a time.
• Add custom descriptions to files.
• Custom file type.
• File & Size limit.
• Error feedback.

How to use it:

1. Load the needed jQuery and Bootstrap framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Create an empty container for the file uploader.

<div id="uploader"></div>

3. Download the plugin and insert the 5x5jqpi.min.js after jQuery.

<script src="./dist/5x5jqpi.min.js"></script>

4. Initialize the file uploader and determine the destination to which the files should be send.

$("#uploader").initUploader({
  destination:'/path/to/server/',
  destinationParams: {
    // uploader parameters here
  }
});

5. Determine whether to allow the user to define custom descriptions for each file. Default: false.

$("#uploader").initUploader({
  showDescription: true
});

6. Set the maximum number of files allowed to upload at a time. Default: 5.

$("#uploader").initUploader({
  fileLimit: 10
});

7. Set the maximum file size. Default: 1mb.

$("#uploader").initUploader({
  sizeLimit: 1000 // 1G
});

8. Create custom file types in a JS object. Default: null.

$("#uploader").initUploader({
  selectOpts: {
    one: 'jquery',
    two: 'script',
    three: 'net'
  },
});

9. Execute a callback after the files have been uploaded. Default: null.

$("#uploader").initUploader({
  postFn: $.noop
});

Changelog:

2021-08-08

• JS update

---

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