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

File Size: 38.9 KB
Views Total: 6848
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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.

  destinationParams: {
    // uploader parameters here

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

  showDescription: true

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

  fileLimit: 10

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

  sizeLimit: 1000 // 1G

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

  selectOpts: {
    one: 'jquery',
    two: 'script',
    three: 'net'

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

  postFn: $.noop



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