Multiple File Upload Validation Plugin - Multifile

File Size: 100 KB
Views Total: 7028
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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-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.