Style file uploads via label

Well, the file upload input is one of the harder to style form elements, so I thought, let's just hide it and style a simple label tag instead.

First, grab a style you like from http://www.cssbuttongenerator.com/ or similar sites.

Here's the markup:

<form id="imageUploadForm" method="post" action="/image/upload" enctype="multipart/form-data">
 <label id="imageUploadLabel" for="imageUpload" class="button">Upload Picture</label>
 <input id="imageUpload" type="file" accept="image/*" capture="camera" name="file" style="display:none;">
</form>

and a small jQuery fix for Firefox

if($.browser.mozilla) {
 $(document).on('click', 'label', function(e) {
 if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
 $(this.control).click();
 }
 });
}

Now you might want to indicate that a file was selected when the input field changes:

var $input = $('#imageUpload'),
$label = $('#imageUploadLabel');
$input.change(function(){
 if($input.val().length > 0){
 $label.addClass('file-selected');
 }else{
 $label.removeClass('file-selected');
 }
});

And even better, upload the image once it's been selected using ajaxSubmit function from https://github.com/malsup/form/ and make the button animate using an image from http://ajaxload.info/

var $input = $('#imageUpload');
var $label = $('#imageUploadLabel');
$input.change(function(){
 if($input.val().length > 0){
 $label.addClass('uploading');
 $input.parent().ajaxSubmit({
 success:function(){
 $label.removeClass('uploading');
 //do something
 },
 clearData: true,
 error: function(e){
 $label.removeClass('uploading');
 //do something
 }
 });
 }
});

Tested on today's versions of Chrome, Firefox and IE9
Here's the code based on redeyes2015's jFiddle

http://jsfiddle.net/nGeBb/5/
As he noted for IE8 you might need to hide the element in a different way, maybe try 0 height and 0 width or similar, whatever works for you