How to make use of it:

1. Load the required jQuery library and different assets within the doc.

<!-- 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 form helper 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 in 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 by way of 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 doable choices for the formhelper technique.

var formhelper = $('.uploader').formhelper({
    maxBytes: 20 * 1024 * 1024,
    maxFiles: 20,
    filePicker: {
      canRemove: true,
      canModify: true,
      canDragDrop: false,
      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 details 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)

Advanced File Picker For Uploader, jquery-formhelper Plugin/Github, file upload jquery plugin, krajee file input initial preview

See Demo And Download