Customize File Uploading button in all browser

It is  a great challenge to customize file uploading button in browsers. So that it will look same in all browser.


First thing is some how  you have to replace the file uploading button with some image. for that you just need some css and javascript and few image. So with out wasting a  min lets start . :)

Step 1. first Include the javascript file in the page or application or application where ever you want.
Step 2 . Include the required css file.

Now the big challenge is to customize the js and css file.
Basically For mozila its a great challenge. because it takes the file field size depending upon the font size.

 for that in the .js file just do one thing. in the below metioned function change in  the .js.

 .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 - $(window).scrollTop() - 3
});
})
ie - it will be good if You set 'left': 0,
                                            'top': 0
step 4. No need to change anything else . Just create a file field field in html. <input type="file" , id = "file_1">
           and call the javascript. $('#file_1').customFileInput();
step 5: That's it It will work fine. No need to change any thing. the js will do rest of the thing. You Can use it for multiple file uploading. which i will give in my next post ... :)

reference : http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

 JS File Content .........

/**
 * --------------------------------------------------------------------
 * jQuery customfileinput plugin
 * --------------------------------------------------------------------
 */
$.fn.customFileInput = function(){
//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(){
//get file name
var fileName = $(this).val().split(/\\/).pop();
//get file extension
var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
//update the feedback
uploadFeedback
.text(fileName) //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
//change text of button
uploadButton.text('Change');
})
.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">Browse</span>').appendTo(upload);
//create custom control feedback
var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">No file selected...</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 - $(window).scrollTop() - 3
});
})
.insertAfter(fileInput); //insert after the input

fileInput.appendTo(upload);

//return jQuery
return $(this);
};



................ end ..............


Css file content .............

body { font-size: 62.5%; margin: 50px; }

fieldset { padding: .6em 0;border:0;border-top: 1px dotted #ddd; }

legend { font-size: 1.5em; font-weight: bold; color: #555; padding: .5em 1em .5em 0; background: #fff; }

label { font-size: 1.4em; display: block; margin: .5em 10px .5em 0; }

input#upload { background: #aaa url(../images/bg-btn.png) bottom repeat-x; padding: .4em 1.2em;border: 1px solid #aaa; color: #222; font-size: 1.2em; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; margin: 2em 0; }

input#upload:hover { background: #eee; color: #111; border-color:#777; }

/*custom upload elements*/

.customfile-input { position: absolute; height: 100px; cursor: pointer; background: transparent; border: 0; opacity: 0; -moz-opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index: 999; }

.customfile { width: 400px; background: #666; cursor: pointer; overflow: hidden; padding: 2px; border: 1px solid #444; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; position: relative; }

.customfile-disabled { opacity: .5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); cursor: default; }

.customfile-feedback { display: block; margin: 1px 1px 1px 5px; font-size: 1.2em; color: #fff; font-style: italic; padding: .3em .6em; }

.customfile-feedback-populated { color: #fff; font-style: normal; font-weight: bold; padding-left: 20px; background: url(../images/icon-generic.gif) left 4px no-repeat; }

.customfile-button { border: 1px solid #999; background: #333 url(../images/bg-submit.gif) bottom repeat-x; color: #fff; font-weight: bold; float: right; width: 50px; padding: .3em .6em; text-align: center; text-decoration: none; font-size: 1.2em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

.customfile-hover .customfile-button, .customfile-focus .customfile-button { color:#111; background: #aaa url(../images/bg-btn.png) bottom repeat-x; border-color:#aaa; padding: .3em .6em; }

.customfile-focus .customfile-button { outline: 1px dotted #ccc; }

/*file type icons*/

.customfile-ext-jpg, .customfile-ext-gif, .customfile-ext-png, .customfile-ext-jpeg, .customfile-ext-bmp { background-image: url(../images/icon-image.gif);}

.customfile-ext-mp3, .customfile-ext-mp4, .customfile-ext-mov, .customfile-ext-swf, .customfile-ext-wav, .customfile-ext-m4v { background-image: url(../images/icon-media.gif);}

.customfile-ext-zip, .customfile-ext-tar, .customfile-ext-sit { background-image: url(../images/icon-zip.gif);}

/* end */

please Make Sure the css url path in the css file .. and the image. You can choose what ever image you want.