Advanced File Picker For Uploader - jQuery formhelper

formhelper is an advanced, customizable file input/file picker plugin that helps developers create file uploaders with ease.

Features:

• Compatible with Bootstrap framework.
• Allows you to pick files via drag and drop.
• Allows you to limit the size, number and format of files.
• Allows you to select multiple files at a time.

How to use it:

1. Load the required jQuery library and other resources in the document.

<!-- Bootstrap Stylesheet (OPTIONAL) -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

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

<!-- Font Awesome Icons -->
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />

2. Load the jQuery formhelper plugin's files.

<link rel="stylesheet" href="./dist/css/jquery-formhelper.min.css" />
<script src="./dist/js/jquery-formhelper.min.js" defer></script>

3. Initialize the plugin on your HTML form.

<form class="uploader"></form>

$(function(){
  var formhelper = $('.uploader').formhelper();
});

4. Add a file picker to the uploader.

var fileInput = formhelper.addFilePicker({

    // config the file input
    fileInput: { 
      name: 'files[]',
      accept: [],
      multiple: false,
    },

    canRemove: true,
    canModify: true,
    canDragDrop: false,
    dragDropArea: false, // drop area
    container: false,
    maxBytes: 10 * 1024 * 1024,
    maxFiles: 10,

    // callbacks
    onChange: undefined,
    onCreate: undefined,
    onRemove: undefined,
    onDrop: undefined,
    onDragEnter: undefined,
    onDragOver: undefined,
    onDragLeave: undefined,
    offDragDrop: undefined,
    
});

5. Add files to the uploader via JavaScript.

fileInput.addFileBox({
  inputs: [
    {name: 'hideValue', value: 'demo'}
  ],
  files: [
    {
      name: '1.png',
      size: 11179,
      link: '1.png',
    },
    {
      name: '2.png',
      size: 356745,
      link: '2.png',
    },
  ],
});

6. All possible options for the formhelper method.

var formhelper = $('.uploader').formhelper({
    maxBytes: 20 * 1024 * 1024,
    maxFiles: 20,
    filePicker: {
      canRemove: true,
      canModify: true,
      canDragDrop: false,
      showFileSize: true,
      dragDropArea: false,
      container: false,
      maxBytes: 10 * 1024 * 1024,
      maxFiles: 10,
      onChange: undefined,
      onCreate: undefined,
      onRemove: undefined,
      onDrop: undefined,
      onDragEnter: undefined,
      onDragOver: undefined,
      onDragLeave: undefined,
      offDragDrop: undefined,
      fileInput: {
        name: 'files[]',
        accept: [],
        multiple: false,
      },
    },
    language: {
      selectFile: 'Select file',
      selectingFile: 'Selecting files...',
      unselectFile: 'No files selected.',
      limitMsg: 'File size limit ({0}). Upload limit {1} files.',
      acceptMsg: 'File accept format list: {0}',
      fileSizeOverload: 'File size overload! limit size: {1}',
      fileCountOverload: 'File count overload! limit count: {1}',
    },
    templates: {
      filePicker: false,
      fileBox: false,
    },
    onFail: function (e) {
      alert(`[${e.code}] ${e.msg}`);
    },
});

7. Get the information about the file picker.

var total = formhelper.getFilePickerInfo();
total.count
total.sizeHum

// get the number of files from the fileInput instance
fileInput.getCount();
// get the size of files from the fileInput instance
fileInput.getSize(true)

Changelog:

v1.8.3 (2022-06-06)

• Hotfix

v1.8.2 (2021-06-11)

• Hotfix

v1.8.1 (2021-06-09)

• Added show file size config

v1.8.0 (2021-05-18)

• Delete fileinput use file blob

2021-04-25

• Added trigger to FilePicker API

---

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