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

Advanced Drag'n'drop File Uploader - jQuery 5x5jqpi.js
File Size: 38.9 KB
Views Total: 1379
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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


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