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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/jquery.simplefileinput.min.js"></script>

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

$('#demo').simpleFileInput({
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.