$('#my-file-input').ace_file_input();
style
default=false. If you set it to well, the large style will be displayedno_file
the text to show when no file is selectedno_icon
the icon to show when no file is selectedbtn_choose
button text when no file is selectedbtn_change
button text when a file is selectedicon_remove
icon to use for remove(reset) buttondroppable
default=false. set true to enable drag & dropthumbnail
small, large or fit. Used when style options is wellallowExt
a list of allowed extensions (whitelist)denyExt
a list of denied extensions (blacklist)allowMime
a list of allowed mime types (whitelist)denyMime
a list of denied mime types (blacklist)maxSize
maximum file size allowed in bytesfile.error.ace
event when an invalid file is selected.
$('#my-file-input').ace_file_input({ style: 'well', no_file: 'Click to choose or drag & drop', droppable: true, //html5 browsers only thumbnail: 'small', //html5 browsers only maxSize: 100000, //~100 KB allowExt: ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff', 'bmp'], allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/tif', 'image/tiff', 'image/bmp'] //html5 browsers only }); $('#my-file-input2').ace_file_input({ denyExt: ['exe', 'php'] });
before_change
callback is called when user selects/drops files
and before files are displayed.
true
and all files will be keptfalse
and no files will be kept-1
and no files will be kept and input will be resetfiles
a list of selected/dropped files which is a FileList in modern browsers
and a string (filename) array for older browsers
dropped
whether files have been dropped or selected$('#my-file-input').ace_file_input({ ... , before_change: function(files, dropped) { //files is a "File" object array in modern browsers //files is a "string" (file name) array in older browsers //dropped=true if files are drag & dropped var valid_files = [] for(var i = 0; i < files.length; i++) { var file = files[i]; if( typeof file === 'string') { /older browsers that don't support FileReader API, such as IE //here, file is just a filename string //if (file is valid) valid_files.push(file); } else if( 'File' in window && file instanceof window.File ) { //file is a "File" object with following properties //file.name //file.type (mime type) //file.size //if (file is valid) valid_files.push(file); } } return valid_files; //or return true;//original input files //or return false;//all are invalid, but don't reset input //or return -1;//all are invalid, reset input }
$('#my-file-input').ace_file_input({ ... , before_remove : function() { if( uploadInProgress) return false;//don't allow resetting return true; } });
$('#my-file-input').ace_file_input({ ..., preview_error : function(filename, error_code) { //filename = name of the file that had a problem switch(error_code) { case 1: //FILE_LOAD_FAILED break; case 2: //IMAGE_LOAD_FAILED break; case 3: //THUMBNAIL_FAILED break; } } });
allowExt
denyExt
allowMime
denyMime
maxSize
before_change
allowExt
option
to select only image files, but user selects none-image files as well,
the browser keeps all selected files but Ace file input shows image files only.
file.error.ace
event is triggered which
has some info about the error.
preventDefault
on event object, the file control will be reset and becomes empty.
$('#my-file-input').data('ace_input_files')
returns valid files only.
$('#my-file-input').ace_file_input({ 'allowExt': ['jpg', 'jpeg', 'png'] }) .on('file.error.ace', function(event, info) { //info.file_count > number of files selected //info.invalid_count > number of invalid files //info.error_count['ext'] > number of files with invalid extension (only if allowExt or denyExt is set) //info.error_count['mime'] > number of files with invalid mime type (only if allowMime or denyMime is set) //info.error_count['size'] > number of files with invalid size (only if maxSize option is set) //info.error_list['ext'] > list of file names with invalid extension //info.error_list['mime'] > ... //info.error_list['size'] > ... //info.dropped > true if files have been selected by drag & drop //if you do this event.preventDefault(); //it will reset (empty) file input, i.e. no files selected });
before_change
callback.
Please see previous section for more info.
show_file_list
takes a list of file names and shows them inside the control:
$('#my-input').ace_file_input('show_file_list', ['file1.txt']);For example, you may want to edit a file input which has user's previous selection.
$('#my-input') .ace_file_input('show_file_list', [ {type: 'image', name: 'name of image', path: 'http://path/to/image/for/preview'}, {type: 'file', name: 'hello.txt'} ]); //type can be 'image', 'video', 'audio', 'file'
update_settings
to update options:
$('#my-input').ace_file_input('update_settings', { allowExt: ['pdf', 'doc', 'docx'] });
files
returns list of selected files:
var files = $('#my-input').ace_file_input('files'); //is similar to: var files = $('#my-input').data('ace_input_files');
method
returns method used by user which is 'select' or 'drop':
var method = $('#my-input').ace_file_input('method'); //is similar to: var method = $('#my-input').data('ace_input_method');
disable
disables file input:
$('#my-input').ace_file_input('disable');
enable
enables file input:
$('#my-input').ace_file_input('enable');
enable_reset
takes an argument and enables/disables reset button:
$('#my-input').ace_file_input('enable_reset', false); $('#my-input').ace_file_input('enable_reset', true);
reset_input
resets file input:
$('#my-input').ace_file_input('reset_input');
reset_input_ui
resets file input's UI only:
$('#my-input').ace_file_input('reset_input_ui');Suppose you have a form with a reset button.
$('#my-form').on('reset', function(e) { $('#my-input').ace_file_input('reset_input_ui'); });
reset_input_field
resets file input field
loading
adds/updates/removes a loading/waiting overlay for example during a file upload:
$('#my-input').ace_file_input('loading' , true);//adds overlay $('#my-input').ace_file_input('loading' , false);//removes overlay $('#my-input').ace_file_input('loading' , ' custom content inside overlay such as a progressbar ');
file.error.ace
event is triggered with some info about invalid files.
$('#my-file-input').ace_file_input({ droppable: true }) .on('change', function() { var files = $(this).data('ace_input_files'); var method = $(this).data('ace_input_method'); });
var files = $('#my-file-input').data('ace_input_files');
examples/file-upload.html
.
var myform = $('#myform'); var fd = new FormData(myform.get(0));//populate FormData with myform dataThis way our filtered files are not taken into account.
var myform = $('#myform'); var fd = new FormData();//empty FormData object $.each(myform.serializeArray(), function(i, item) { //add form fields one by one to our FormData fd.append(item.name, item.value); });The above does not add file fields to FormData and we should append our files like this:
myform.find('input[type=file]').each(function(){ var field_name = $(this).attr('name'); //for fields with "multiple" file support //field name should be something like `myfile[]` var files = $(this).data('ace_input_files'); if(files && files.length > 0) { for(var f = 0; f < files.length; f++) { fd.append(field_name, files[f]); } } });Now our FormData object can be submitted using Ajax:
var deferred = $.ajax({ url: myform.attr('action'), type: myform.attr('method'), processData: false,//important contentType: false,//important dataType: 'json',//depending on your server side response data: fd//our FormData object }) deferred.done(function(result) { //on success (successful response from server) }).fail(function(result) { //unable to receive a valid response from server });
FormData
object, we can use
an invisible frame to upload our form without leaving or refreshing the page:
var deferred = new $.Deferred //create a custom deferred object, because there's no ajax here to create it for us var temporary_iframe_id = 'temporary-iframe-'+(new Date()).getTime()+'-'+(parseInt(Math.random()*1000)); var temp_iframe = $('<iframe id="'+temporary_iframe_id+'" name="'+temporary_iframe_id+'" \ frameborder="0" width="0" height="0" src="about:blank"\ style="position:absolute; z-index:-1; visibility: hidden;" />') .insertAfter(myform) myform.append('<input type="hidden" name="temporary-iframe-id" value="'+temporary_iframe_id+'" />'); temp_iframe.data('deferrer' , deferred); //we save the deferred object to the iframe and in our server side response //we use "temporary-iframe-id" to access iframe and its deferred object myform.attr({ 'method': 'POST', 'enctype': 'multipart/form-data', 'target': temporary_iframe_id //important }); myform.get(0).submit(); //if we don't receive a response after 30 seconds, let's declare it as failed! ie_timeout = setTimeout(function(){ ie_timeout = null; temp_iframe.attr('src', 'about:blank').remove(); deferred.reject({'status':'fail', 'message':'Timeout!'}); } , 30000); }And deferred callbacks are similar to ajax example.
examples/file-upload.php
validates files and only allows image files.
multiple
attribute
and input name has brackets like myfiles[]
:
<input multiple type="file" name="myfiles[]" id="myfiles" />