$('#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;
}
}
});
allowExtdenyExtallowMimedenyMimemaxSizebefore_changeallowExt 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 data
This 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" />