How To Customize The HTML Form File Upload Element

dhtmldhtml Posts: 1,002
edited August 2017 in Writings
Uploading is a very common task, in fact an almost daily task for seasoned website developers. However different browsers seem to have a very fixed way of displaying the form field element. This can be very acceptable in many cases, I specifically love the way google chrome displays its file upload.However there are instances where you wish to customize the look and feel of the file upload element as you can see on some certain websites that do have the typical file upload element (at least not to naked eye).An example is linkedin, that small image button on the top-right corner right inside the text area itself.file-upload.pngThere are many approaches to getting this done, but we are going to be looking at a fair simple approach.How To Customize Your File Upload FieldYou can try hiding the file upload field element, and using a custom image or text in its place. Then add an onclick event on the field to trigger file download.Pros: This is a very fast and efficient way to solve the problem. And it will actually work on some browsers like google chrome.Cons: Some browsers like internet explorer will appear to work by allowing you to select your file, but a blank entry will be returned and no actual upload will happen when you submit your form.

Reason: these type of browsers need to ensure that the file upload field was actually clicked by user (and a triggered click even shall not do this).How To Customize The File Upload Field ProperlyYou need to do the following:
  1. Provide an image to be presented to the client
  2. Set the image as the background of your upload form
  3. Add the file upload field to your form 
  4. Overlap the form on the file upload field
I know this sounds a tad complicated, but here is an example of how I actually did it:

Code:Customizing File Upload Field

Pros: This actually works in all browsers i tested on (even internet explorer 6). And it is the popular approach used on linkedin and some other social networking websites.

Cons: Uhm, if you need other form elements, you cannot easily put them inside the same form. 


Sign In or Register to comment.