Multiple File Upload Validation Plugin - Multifile

An advanced multiple file selection jQuery plugin that chiefly enhances the native file input with 3 useful file select validators:

• Limits the max number of files allowed to select.
• Restricts certain file extensions/formats.
• Allows you to set the upload size limit.

More Features:

• Image preview.
• Error feedback with multi-language support.
• Custom file list.
• Selection & Validation event handlers.
• Works with the native HTML5 file input.

How to use it:

1. Load the jquery.MultiFile.js script after loading jQuery library and we're ready to go.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.MultiFile.js"></script>

2. Limit the max number of files allowed to select.

<!-- Using maxlength attribute -->
<input type="file"
       class="multi"
       maxlength="3"
/>

<!-- Or Using CSS classes -->
<input type="file"
       class="multi max-3"
/>

// Or Via JavaScript
$('#yourInput').MultiFile(3);

// Or
$('#yourInput').MultiFile({
  max: 3
});

3. Restrict certain file extensions/formats.

<!-- Using accept attribute -->
<input type="file"
       class="multi"
       accept="gif|jpg"
/>

<!-- Or Using CSS classes -->
<input type="file"
       class="multi accept-gif|jpg"
/>

// Or Via JavaScript
$('#yourInput').MultiFile({
  accept: 'gif|jpg|png'
});

4. Set the upload size limit.

<!-- Using data-maxsize attribute (under <1MB in total) -->
<input type="file"
       class="multi"
       data-maxsize="1024"
/>

<!-- Using data-maxsize attribute (under <1MB each) -->
<input type="file"
       class="multi"
       data-maxfile="1024"
/>

<!-- Or Using CSS classes -->
<input type="file"
       class="multi maxsize-1024"
/>

// Or Via JavaScript
$('#yourInput').MultiFile({
  max_size: 1024
});

5. Enable the image preview functionality before uploading.

<input type="file"
       multiple
       class="multi with-preview"
/>

// Or Via JavaScript
$('#yourInput').MultiFile({
  preview: true,
  previewCss: 'max-height:100px; max-width:100px;',
});

6. Shows selected files in a given container.

<div id="myList"></div>

$('#yourInput').MultiFile({
  list: '#myList'
});

7. Full plugin options with default values.

$('#yourInput').MultiFile({
  accept: '', // accepted file extensions
  max: -1, // maximum number of selectable files
  maxfile: -1, // maximum size of a single file
  maxsize: -1, // maximum size of entire payload

  // name to use for newly created elements
  namePattern: '$name', // same name by default (which creates an array)
  /*master name*/ // use $name
  /*master id */ // use $id
  /*group count*/ // use $g
  /*slave count*/ // use $i
  /*other  */ // use any combination of he above, eg.: $name_file$i

  // previews
  preview: false,
  previewCss: 'max-height:100px; max-width:100px;',

  // what text to display between file names
  separator: ', ', // string or false

  // STRING: collection lets you show messages in different languages
  STRING: {
    remove: 'x',
    denied: 'You cannot select a $ext file.\nTry again...',
    file: '$file',
    selected: 'File selected: $file',
    duplicate: 'This file has already been selected:\n$file',
    toomuch: 'The files selected exceed the maximum size permited ($size)',
    toomany: 'Too many files selected (max: $max)',
    toobig: '$file is too big (max $size)'
  },

  // name of methods that should be automcatically intercepted so the plugin can disable
  // extra file elements that are empty before execution and automatically re-enable them afterwards
  autoIntercept: ['submit', 'ajaxSubmit', 'ajaxForm', 'validate', 'valid' /* array of methods to intercept */ ],
});

8. Execute a callback function when an error occured.

$('#yourInput').MultiFile({
  error: function (s) {
    if(typeof console != 'undefined') console.log(s);
      alert(s);
  }
});

9. All possible event handlers.

$('#yourInput').MultiFile({
  onFileRemove: function(element, value, master_element) {
    $('#output').append('<li>onFileRemove - ' + value + '</li>')
  },
  afterFileRemove: function(element, value, master_element) {
    $('#output').append('<li>afterFileRemove - ' + value + '</li>')
  },
  onFileAppend: function(element, value, master_element) {
    $('#output').append('<li>onFileAppend - ' + value + '</li>')
  },
  afterFileAppend: function(element, value, master_element) {
    $('#output').append('<li>afterFileAppend - ' + value + '</li>')
  },
  onFileSelect: function(element, value, master_element) {
    $('#output').append('<li>onFileSelect - ' + value + '</li>')
  },
  afterFileSelect: function(element, value, master_element) {
    $('#output').append('<li>afterFileSelect - ' + value + '</li>')
  },
  onFileInvalid: function(element, value, master_element) {
    $('#output').append('<li>onFileInvalid - ' + value + '</li>')
  },
  onFileDuplicate: function(element, value, master_element) {
    $('#output').append('<li>onFileDuplicate - ' + value + '</li>')
  },
  onFileTooMany: function(element, value, master_element) {
    $('#output').append('<li>onFileTooMany - ' + value + '</li>')
  },
  onFileTooBig: function(element, value, master_element) {
    $('#output').append('<li>onFileTooBig - ' + value + '</li>')
  },
  onFileTooMuch: function(element, value, master_element) {
    $('#output').append('<li>onFileTooMuch - ' + value + '</li>')
  }
});

Changelog:

2022-12-14

• Make main file input optional before submitting

2022-11-12

• proposed change to ignore mime type definitions in accept attribute

---

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