Stunning File Picker & Uploader Plugin In jQuery - Exort

File Size: 9.78 MB
Views Total: 3567
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Stunning File Picker & Uploader Plugin In jQuery - Exort

Exort is a brand new and pretty nice jQuery file picker & uploader plugin that supports multi-file selection, file preview, file size/type validation, upload handling and much more.

It is a great alternative to the native file input that helps you create a progressional file uploader & media library component for better user experience.

Looking for more plugins for file uploaders? Check out our 10 Best File Upload Libraries in jQuery or Vanilla JavaScript article.

How to use it:

1. Link to jQuery library and the Exort plugin's files in the document.

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

2. Create a file picker button in the HTML form.

<form name="auto-uploader" class="example">
  <button type="button" class="auto-uploader">
    Select Files...
  </button>
</form>

3. Initialize the form as a uploader, specify the path to the file handler (upload.php in this example) and define the name of the file input generated by the plugin.

var myUploader = $('.example').uploader({
    upload_url: 'upload.php',
    input_name: 'file'
})

4. By default the plugin will automatically start uploading after a file is selected. To enable manual file upload, set the auto_upload to false and setup the Save as follows:

var myUploader = $('.example').uploader({
    upload_url: 'upload.php',
    input_name: 'file',
    auto_upload: false
})

$('.save').on('click', function() {
  myUploader.upload(function() {
    console.log("Upload success...")
  })
})

5. Create a Wordpress-style media library in the file picker popup that fetches and previews all files uploaded and stored in the server.

var myUploader = $('.example').uploader({
    upload_url: 'upload.php',
    input_name: 'file',
    file_picker_url: 'files.php'
})

6. Limit the file size & restrict the file type by extensions.

var myUploader = $('.example').uploader({
    upload_url: 'upload.php',
    input_name: 'file',
    maximum_total_files: 4, // the maximum number of files
    maximum_file_size: 50009000, //the maximum file size of every file uploaded
    file_types_allowed: ['image/jpeg', 'image/png']
})

7. Callback functions.

var myUploader = $('.example').uploader({
    upload_url: 'upload.php',
    input_name: 'file',
    on_error: function(err) {},
    on_before_upload: function() {},
    on_after_upload: function() {}
})

8. All default configuration options.

var myUploader = $('.example').uploader({
    // Uploader
    upload_url: '',
    input_name: '',
    auto_upload: true,
    maximum_total_files: null,
    maximum_file_size: null,
    file_types_allowed: null,

    // File picker
    file_picker_url: '',
    files_per_page: 24,
})

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