Simple jQuery Plugin For Custom File Upload Input

File Size: 11.4 KB
Views Total: 6217
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Plugin For Custom File Upload Input

A simple jQuery plugin used to customize & enhance the native file input using CSS and allowedExts JS array which restricts the file extensions allowed to upload.

How to use it:

1. Include the jquery.simplefileinput.css for the preset file input styles.

<link rel="stylesheet" href="src/css/jquery.simplefileinput.css">

2. Insert a regular file input in your document body.

<input type="file" id="demo">

3. Include the jQuery library and the jQuery Simple File Input plugin at the bottom of the document.

<script src="//"></script>
<script src="src/js/jquery.simplefileinput.min.js"></script>

4. Initialize the plugin and setup the options for the file input.

placeholder : 'Select an image',
buttonText : 'Select',
allowedExts : ['png', 'gif', 'jpg', 'jpeg']

5. Options and defaults.

  • placeholder: 'Pick your file': A text that shows up when there is no selected file yet
  • wrapperClass : 'sfi-container': This is the class used for the wrapper that wraps the customised file input. 
  • validClass : 'sfi-valid': If everything goas right, this class gets added to the wrapper and you can use it for CSS'ying.
  • errorClass : 'sfi-error': If a file with a wrong extension has been picked, this class gonna be added to the wrapper, so you can use it for CSS'ying.
  • disabledClass : 'sfi-disabled': If the input file is disabled on the html, you may need to give it a different style, that's why .sfi-disabled is there.
  • buttonText : 'Pick your file': Used for the button as a visual tex
  • allowedExts : false: This has to be an array
  • width : 300: This parameter can be false, this way the plugin would not set a width for the element, but if you do need a specific dimension you can use it.
  • onInit : function(){}: Gets called during the initialisation of the plugin ( on each input );
  • onFileSelect : function(){}: Gets called when a file gets selected
  • onError : function(){}: Gets called if the choosen file has a non-accepted extention / file type.

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