blob: 80971a11617dbfdc15b0b0ec2f189291f84ba016 [file] [log] [blame]
/**
* --------------------------------------------------------------------
* jQuery customfileinput plugin
* Author: Scott Jehl, scott@filamentgroup.com
* Copyright (c) 2009 Filament Group
* licensed under MIT (filamentgroup.com/examples/mit-license.txt)
* --------------------------------------------------------------------
*/
$.fn.customFileInput = function(){
var isChanged = false;
var maxLength = 32;
//apply events and styles for file input element
var fileInput = $(this)
.addClass('customfile-input') //add class for CSS
.mouseover(function(){ upload.addClass('customfile-hover'); })
.mouseout(function(){ upload.removeClass('customfile-hover'); })
.focus(function(){
upload.addClass('customfile-focus');
fileInput.data('val', fileInput.val());
})
.blur(function(){
upload.removeClass('customfile-focus');
$(this).trigger('checkChange');
})
.bind('disable',function(){
fileInput.attr('disabled',true);
upload.addClass('customfile-disabled');
})
.bind('enable',function(){
fileInput.removeAttr('disabled');
upload.removeClass('customfile-disabled');
})
.bind('checkChange', function(){
if(fileInput.val() && fileInput.val() != fileInput.data('val')){
fileInput.trigger('change');
}
})
.bind('change',function(){
isChanged = true;
//get file name
var fileName = $(this).val().split(/\\/).pop();
//get file extension
var fileExt = 'icon-' + getFileType(fileName);//'customfile-ext-' + fileName.split('.').pop().toLowerCase();
//update the feedback
var tmpFileName = '';
var checkLen = 0;
for(var i = 0; i < fileName.length && checkLen < maxLength; i++){
var c = fileName.charAt(i);
if(getEncodeType(c).encodeType == 'UNICODE'){
checkLen += 3;
}else{
checkLen += 1;
}
tmpFileName += c;
}
if(fileName != tmpFileName){
tmpFileName = tmpFileName + '...';
} else {
tmpFileName = fileName;
}
uploadFeedback
.html(HTMLEncode(tmpFileName)) //set feedback text to filename
.removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
.addClass(fileExt) //add file extension class
.data('fileExt', fileExt) //store file extension for class removal on next change
.addClass('customfile-feedback-populated'); //add class to show populated state
upload.attr('title', fileName);
//change text of button
uploadButton.html("<span id='uploadBtn' data-trans='change_btn'>"+$.i18n.prop('change_btn')+"</span>");
})
.click(function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
fileInput.data('val', fileInput.val());
setTimeout(function(){
fileInput.trigger('checkChange');
},100);
});
//create custom control container
var upload = $('<div class="customfile"></div>');
//create custom control button
var uploadButton = $('<span class="customfile-button" aria-hidden="true"><span id="uploadBtn" data-trans="browse_btn">'+$.i18n.prop('browse_btn')+'</span></span>').appendTo(upload);
//create custom control feedback
var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true"><span data-trans="no_file_selected">'+$.i18n.prop("no_file_selected")+'</span></span>').appendTo(upload);
//match disabled state
if(fileInput.is('[disabled]')){
fileInput.trigger('disable');
}
//on mousemove, keep file input under the cursor to steal click
upload
.mousemove(function(e){
fileInput.css({
'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X)
'top': e.pageY - upload.offset().top - 14
});
})
.insertAfter(fileInput); //insert after the input
fileInput.appendTo(upload);
//return jQuery
return $(this);
};