Subscribe

Close

Thank you for visiting!

Please consider subscribing to the RSS feed or following me on Twitter.

Foolproof Custom File Input

So you wan't a custom file upload button.

It's easy. Just hide it, add a button, a couple of click events and you're fine. Except, you're not. IE is quite strict when it comes to file inputs. Browser backward compatibility issues will make life harder for you.

Here's a working solution tested in IE9 and later, and modern browsers.

  1. Place your input file field in a hidden div.
  2. Wrap a label around the hidden div.
  3. Make the label look like a button.
  4. When the label is clicked, trigger the hidden input field.
  5. When a file is chosen, use the change event to display the file name.
The HTML:

<form action="http://localhost/upload" method="post" enctype="multipart/form-data">
<label class="button upload">Upload file
<div class="hidden">
<input class="uploadfile" type="file" />
</div>
</label>
<input type="submit" class="button" value="Submit">
<span></span>
<form>
The JavaScript:

$('.button.upload').click(function () {
var uploadFile = $(this).find('.uploadfile');
uploadFile.trigger('click');
});

$('.uploadfile').change(function() {
var elm = $(this);
var file = elm.val().split('\\');
var fileName = file[file.length - 1];
$(this).closest('form').find('span').html(fileName);
});

And the basic CSS looks like this:

.hidden { display: none }
.button { border: solid 2px #333 }

To the top