jQuery.filer - Simple HTML5 file uploader, a plugin tool for jQuery which change completely file input and make it with multiple file selection, drag&drop support, different validations, thumbnails, icons, instant upload, print-screen upload and many other features and options.
We've created an input and activated partial all jquery.filer features on this demo to show for what this script is actually used for and it's power. In this example we've deactivate all file validators and used drag&drop, instantly file upload, file preview, clipboard image paste, customized input and thumbs templates, custom theme features to create a good playground for you. You can also take a look in your browser console to see the server response after uploading a files.
This section gives a short description about the most considerable script features.
Design your own file input with HTML&CSS or just use our default template.
Drag and drop files straight from your desktop and upload directly them.
Upload the file directly to server after choosing or dragging it.
Choose multiple files from different folders without instantly uploading them.
Use this features or create your own action to manipulate with files.
Limit your users to a specific file type, size, number of files or write your own custom validator.
Give your users an in-browser thumb preview of images or file extension before they upload.
Keep the uploaded files to input for previewing or editing them.
You can completely manipulate your new jQuery.filer input by using API attributes and methods.
Customize your input, templates(inline variables, 40+ icons), captions, callbacks and many others.
This section describes the script compatibility with browsers and servers.
Download the plugin, unzip it, copy files and include jQuery.filer script and stylesheets in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:
Include the jQuery.filer stylesheets into head.
<link href="./css/jquery.filer.css" type="text/css" rel="stylesheet" />
<link href="./css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />
Include the jQuery library and jQuery.filer script file in your html page.
<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="./js/jquery.filer.min.js"></script>
Create a simple form with an input file element.
<form action="php/upload.html" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="filer_input" multiple="multiple">
<input type="submit" value="Submit">
</form>
The plugin is named "filer" and can be applied to any element. If you are not familiar with jQuery, please, read this tutorial for beginners.
$(document).ready(function() {
$('#filer_input').filer();
});
Here is the result of our effort. Note that we haven't applied any option or theme and the example below is the default version.
In this example we limit our users with maximal 3 number of files, all files together must have maximal 3MB's and the file's extensions should be matched in the array(ex: ['jpg', 'png', 'gif']). We are also changig the file input to jQuery.filer default design. We also need to show the file preview in our browser before uploading the file.
limit: 3,
maxSize: 3,
extensions: ["jpg", "png", "gif"],
showThumbs: true
In this example we designed our own file input and used our own theme - 'dragdropbox'. We also added the file preview in our browser before uploading the file.
showThumbs: true,
templates: {...} // see demo in .zip file
If you want to have an input like in Example 1 and also to allow your users to upload files from different folders just set addMore option to true
addMore: true
In this example we activated Drag&Drop feature for the default jQuery.filer input. Note that this feature is working only with Instantly Upload feature!
dragDrop: {...} // see documentation
In this example we activated Instantly Upload feature. After choosing a file, it should automatically upload it!
uploadFile: {...} // see documentation
In this example we activated addMore option and added 2 files(this
files were already uploaded). Now you can edit the 2 uploaded files or add
some more.
Note that on the
back-end side to get the full list with files you will need to append new
uploaded list to the old one.
files: [...] // see documentation
The script is available on Github. You can download it directly from there or just to take a look at source code, issues and changelog.
You can apply jQuery.filer plugin to the input file and to send options als Object or Function. Example:
$("#file_input").filer( Obj );
$("#file_input").filer(function(default_options){ return Obj; });
Maximal number of files.
null, Number; Default value: nullMaximal size in MB's for all files.
null, Number; Default value: nullMaximal file size in MB's for each file.
null, Number; Default value: nullFile extensions and mime types whitelist.
null, Array; Default value: nullCreate a new file input element. You can use the default template or to write your own as String or jQuery Element.
Boolean, String, Object; Default value: trueShow the in-browser files previews.
Boolean; Default value: falseThe target thumbnails target element selector. Use this option when you want to append your files previews into specific element.
null, String; Default value: nullSpecify the jQuery.filer theme. It will just set to main filer div as class the theme name.
null, String; Default value: nullSpecify the file preview templates, selectors and some options.
Object, Default value:{ box: null, //Thumbnail's box element {null, String} item: null, //File item element {String(use Filer Variables), Function} itemAppend: null, //File item element for edit mode {String(use Filer Variables), Function} progressBar: null, //File upload progress bar element {String} itemAppendToEnd: false, //Append the new file item to the end of the list {Boolean} removeConfirmation: true, //Remove file confirmation {Boolean} canvasImage: true //Resize and crop the image thumbnail to item element size _selectors: { list: null, //List selector {String} item: null, //Item selector {String} progressBar: null, //Progress bar selector {String} remove: null //Remove button selector {String} } }
Enable Instantly file uploading feature. In the object you can specify the normal jQuery $.ajax options, or callbacks.
null, Object; Default value:{ url: null, //URL to which the request is sent {String} data: null, //Data to be sent to the server {Object} type: 'POST', //The type of request {String} enctype: 'multipart/form-data', //Request enctype {String} synchron: false //Upload synchron the files beforeSend: null, //A pre-request callback function {Function} success: null, //A function to be called if the request succeeds {Function} error: null, //A function to be called if the request fails {Function} statusCode: null, //An object of numeric HTTP codes {Object} onProgress: null, //A function called while uploading file with progress percentage {Function} onComplete: null //A function called when all files were uploaded {Function} }
Enable Drag&Drop feature. In this object you can specify only the callbacks. Note that this feature works only with activated uploadFile option.
null, Object; Default value: null{ dragEnter: null, //A function that is fired when a dragged element enters the input. {Function} dragLeave: null, //A function that is fired when a dragged element leaves the input. {Function} drop: null, //A function that is fired when a dragged element is dropped on a valid drop target. {Function} dragContainer: null //Drag container {String} }
Multiple file selection without instantly uploading them. You need to
enable this feature in Edit Mode when you need to upload more than 1
file.
Note that if you want to use
it, you will need to remove the options dragDrop and uploadFile.
Allow or disallow user to upload the same file multiple time.
Boolean; Default value: falsePrintscreen or copied images would be uploaded by pasting. Note that this feature works only by instantly uploading. In Firefox this feature is not available.
Boolean; Default value: falseBy removing a file the script is creating an hidden input with it's name. Use this option if you want to specify the input's name.
null; Default value: jfiler-items-exclude-(input file name)-(input index)The list with the already uploaded files. Use this option in Edit Mode. Note that on the back-end side to get the full list with files you will need to append new uploaded list to the old one (security reasons).
null, Array; Default value:[ { name: "appended_file.jpg", size: 5453, type: "image/jpg", file: "/path/to/file.jpg", url: "http://path/to/link/file2.jpg" }, { name: "appended_file_2.jpg", size: 9453, type: "image/jpg", file: "path/to/file2.jpg", url: "http://path/to/link/file2.jpg" } ]
A function that is fired before rendering the new file input.
null, Function; Default value: nullA function that is fired after rendering the new file input.
null, Function; Default value: nullA function that is fired before showing thumbnail's box. Should return Boolean value.
null, Function; Default value: nullA function that is fired after appending all thumbnails items.
null, Function; Default value: nullA function that is fired after selecting a file and before adding it to the memory. Should return Boolean value.
null, Function; Default value: nullA function that is fired after selecting a file.
null, Function; Default value: nullA function that is fired by checking the file. Should return a Boolean value.
null, Function; Default value: nullA function that is fired on/before deleting a file. Should return Boolean value.
null, Function; Default value: nullA function that is fired when no files are selected.
null, Function; Default value: nullSpecify your own options that you can also use as Filer Variables.
ObjectThe dialogs object for alert and confirmation. You can use your own modals to do this.
null, Obj; Default value:{ alert: function(text) { return alert(text); }, confirm: function(text, callback) { confirm(text) ? callback() : null; } }
Specify your own captions. Here you can also use Filer Variables.
Object; Default value:{ button: "Choose Files", feedback: "Choose files To Upload", feedback2: "files were chosen", drop: "Drop file here to Upload", removeConfirmation: "Are you sure you want to remove this file?", errors: { filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.", filesType: "Only Images are allowed to be uploaded.", filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-fileMaxSize}} MB.", filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB.", folderUpload: "You are not allowed to upload folders." } }
You can completely manipulate your jQuery.filer input. Just get jQuery.filer toolkit with .prop(). Example:
var filerKit = $("#file_input").prop("jFiler"); filerKit.reset();
jQuery.filer options.
ObjectThumbnail's list Element.
DOM ObjectThumbnail's box Element.
DOM ObjectNew file input Element.
DOM ObjectFile input Element.
DOM ObjectJavascript FileList files.
FileListjQuert.filer files list.
ObjectLast choosed file.
ObjectAppend file function. Send an Object with file information als paramenter.
Function; Parameter:{ name: "appended_file.jpg", size: 5453, type: "image/jpg", file: "/path/to/file.jpg" }
Retry upload-failed file function. Send a Number with file index als paramenter.
Function; Parameter:0
Remove file function. Send a Number with file index als paramenter.
Function; Parameter:0
Reset function.
FunctionEnable input function.
FunctionDisable input function.
FunctionYou can use this input attributes to specify the filer options directly from HTML. Example:
<input type="file" name="files[]" id="filer_input" data-jfiler-limit="3">
[data-jfiler-name]
String[data-jfiler-limit]
Number[data-jfiler-maxSize]
Number[data-jfiler-extensions]
Comma spliced[data-jfiler-changeInput]
Boolean[data-jfiler-showThumbs]
Boolean[data-jfiler-appendTo]
String[data-jfiler-theme]
String[data-jfiler-excludeName]
String[data-jfiler-files]
JSON String[data-jfiler-options]
JSON String[data-jfiler-uploadUrl]
String[data-jfiler-uploadData]
JSON StringFiler Variables are very simple to use in jQUery.filer string options. To use them just write {{fi-(variable name)}}. Below is an example and are all available combinations that can be used:
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded."
fi-name
fi-size
fi-size2
fi-type
fi-extension
fi-icon
fi-icon2
fi-id
fi-image
fi-progressBar
fi-limit
fi-maxSize
fi-<options object key>
The original creators of this plugin, CreativeDream, moved the project to jQuery.FileUploader. As such, support for this version is no longer available.
This page and repository is currently maintained by Gerard Balaoro. The source was forked from a previous version of the original project while the documentation page was scraped from an archived version or the original one.
You are still free to contribute and improve this project!
For themes, you can contribute to plugin by making a
Pull Request
to /css/themes/
and writing a short description containing plugin templates options.
PHP File Uploader is an easy to use, hi-performance File Upload Script which allows you to upload files to webserver. It is another script designed for jQuery.filer plugin. You can get it using the link below.
jQuery.filer is licensed under Apache License 2.0.
Simple HTML5 file uploader plugin tool for jQuery.