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.
- Completely change File Input
- Upload files after choosing
- Add more files to input without uploading them
- Validate files(limit, size, extension)
- Create thumbs
- Custom icons for each type of file
- Custom templates & themes for: input, thumbs, icons
- Remove Choosed/Uploaded files
- Append existing files to input for a preview
- Image paste from clipboard
- Custom captions
- Custom callbacks
- Templates inline variables, ex: {{fi-limit}}
- All icons in a one beautiful font
- Drag & Drop Option
- Trigger options
Styles:
Include the jquery.filer css file in your html page.
<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" />Javascript:
Include the jQuery library and jquery.filer script file in your html page.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/jquery.filer.min.js"></script>Create link elements whose href attributes will contain the path of the element you wish to open within the iLightbox.
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="input_file" multiple="multiple">
<input type="submit">
</form>The plugin is named "filer" and can be applied to any element. You will probably also specify some options while applying the plugin.
$(document).ready(function() {
$('#input_file').filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: true,
showThumbs: true,
appendTo: null,
theme: "default",
templates: {
box: '<ul class="jFiler-item-list"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
uploadFile: {
url: "upload.php",
data: {},
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function(){},
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: {},
onProgress: function(){},
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
},
addMore: true,
clipBoardPaste: true,
excludeName: null,
beforeShow: function(){return true},
onSelect: function(){},
afterShow: function(){},
onRemove: function(){},
onEmpty: function(){},
captions: {
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-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
});Fully documentation of plugin options and features.
Options:
- limit Maximum Limit of files. {null, Number}
- maxSize Maximum Size of files. {null, Number(in MB's)}
- extensions Whitelist for file extension. {null, Array}
- changeInput Change input. {Boolean, String(DOM Element), Object(DOM Element)}
- showThumbs Show input files as thumbnails. {Boolean}
- appendTo Append thumbnails to element. {null, String(Dom Element)}
- theme jQuery.filer theme. {null, String}
- templates
- box Thumbnails box element {null, String}
- item Thumbnails file item element {String(use Filer Variables), Function}
- itemAppend Thumbnails appended file item element {String(use Filer Variables), Function}
- progressBar Thumbnails file item upload progress bar element {String}
- itemAppendToEnd Append file item to the end of list {Boolean}
- removeConfirmation Remove file confirmation {Boolean}
- selectors
- list List selector {String}
- item Item selector {String}
- progressBar Progress bar selector {String}
- remove Remove button selector {String}
- uploadFile
- url URL to which the request is sent {String}
- data Data to be sent to the server {Object}
- type The type of request {String}
- enctype Request enctype {String}
- beforeSend A pre-request callback function {Function}
- success A function to be called if the request succeeds {Function}
- error A function to be called if the request fails {Function}
- statusCode An object of numeric HTTP codes {Function}
- onProgress A function called while uploading file with progress percentage {Function}
- dragDrop
- dragEnter A function that is fired when a dragged element enters the input. {Function}
- dragLeave A function that is fired when a dragged element leaves the input. {Function}
- drop A function that is fired when a dragged element is dropped on a valid drop target.
- addMore Multiple file selection without instant uploading {Boolean}
- clipBoardPaste Printscreen paste and upload {Boolean}
- excludeName Removed files input name {null, String} Default: jfiler-items-exclude-(input file name)-(input id)
- beforeShow A function that is fired before showing thunbnails {Function}
- onSelect A function that is fired after selecting files {Function}
- afterShow A function that is fired after appending all thumbnails items {Function}
- onRemove A function that is fired after deleting a file {Function}
- onEmpty A function that is fired when no files are selected {Function}
- captions
- button New Input button text {String}
- feedback New Input field text {String}
- feedback2 New Input after choosing files text {String}
- drop New Input on drag text {String}
- removeConfirmation Remove file confirmation text {String}
- errors
- filesLimit {String(use Filer Variables)}
- filesType {String(use Filer Variables)}
- filesSize {String(use Filer Variables)}
- filesSizeAll {String(use Filer Variables)}
Triggers:
- $('#input_file').trigger("filer.append", {files:[]})
- $('#input_file').trigger("filer.remove", {id:0})
- $('#input_file').trigger("filer.reset")
- $('#input_file').trigger("filer.getList", {files:[]})
Attributes:
- data-jfiler-name | name of input (is used while applying plugin to a non file input)
- data-jfiler-limit | files limit
- data-jfiler-maxSize | files maximum size
- data-jfiler-extensions | separeted with comma
- data-jfiler-changeInput | {Boolean, String}
- data-jfiler-showThumbs | show thumbnails
- data-jfiler-appendTo | append thumbnails to selector
- data-jfiler-theme | custom filer theme
- data-jfiler-excludeName | exclude files input name
- data-jfiler-files | append files, ex: "{"files":[{"name":"appended_file.jpg","size":5453,"type":"image/jpg",file:"/path/to/file/appended_file.jpg"}]}"
Filer Variables are created for simple usage them in the plugin string options. To use them just write {{fi-(variable name)}}. Below are all available variables that can be used:
- fi-name
- fi-size
- fi-size2
- fi-type
- fi-extension
- fi-icon
- fi-icon2
- fi-id
- fi-image
- fi-progressBar
- fi-limit
- fi-maxSize
Want to be part of this project? Great! All are welcome!
Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch.
By 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. You can get it on the link below.
PHP Uploader
Licensed under MIT license.