Custom File Input Field

So we all know that every browser has their own way of displaying file fields and they all basically suck. Google is doing some neat things with their new Blink engine but unfortunately we cannot just develop for a single browser (someday…). Here is how I went about setting up a custom File Input Field with an image preview.

The end product looks something like this:
Screen Shot 2014-10-17 at 9.40.37 AM

First lets setup the HTML.

NOTE: This is only a part of the form. Remember, you will need to wrap this in a form tag with the enctype=“multipart/form-data” in order to work with files.

Couple things going on here. Take note that I am laying out a separate file field AND calling a different function when working with IE browsers. This means that this will not look or work quite the same in IE. The biggest difference being that no image preview will appear.

Now lets setup the Javascript functionality.

Hopefully none of this looks too strange. If you are at all familiar with jQuery and Javascript you should be able to figure out what is going on here. Notice that in the Non-IE MIME check there is a loop…that is because you COULD setup a multiple=”true” file input and it should still work more or less the same. However this exact code will not work with a multiple file field but it will get you 90% of the way there.

Lastly we are going to need some styling. Here is some LESS.

This less is taken out of context but it should be all you need.

NOTE: You will need to get your own cover image. I didn’t think it would be right to share mine but as you can see it can be anything you want.