Replace upload field with a custom upload button image

  • Profile Image
    Asked on November 03, 2014 at 08:18 AM

    Custom File upload (input type=file) button


    I have been fiddling with getting the file upload component (not the multiple file upload) to be showing a custom button (because I don't like the standard browser button).

    Found a very simple piece of html/css to make this work. It actually works pretty well when I set this up in a test environment, no Jotform whatsoever.

    Now, as soon as I try to incorporate this into my Jotform, I have trouble making sure that the button is actually clickable. I can get it to work a bit, but clicking on the button image itself does not do anything, some area around it triggers the actual action. I obviously would like the button image to be clickable only, not the area around it.

    Can you help me out getting this to work? This does not need to be a perfect cross-browser solution, I will only use the form in webkit browsers. I don't actually need a written label, the button is enough.

    Thanks in advance!!

    Kind regards,





    <style type="text/css">

    .image-upload > input


        display: none;




    <div class="image-upload">

        <label for="file-input">

            <img src="button.png"/>


        <input id="file-input" type="file"/>





  • Profile Image
    Answered on November 03, 2014 at 08:58 AM

    Please try the area tag and use some coordinates to target a certain area of the image to be clickable. Check this guide

    You can view the sample in here As you can see that when hovering over a planet makes it clickable. Try it and let us know if it still unable to resolve your problem.

  • Profile Image
    Answered on November 03, 2014 at 02:21 PM

    Hi Jedcadorna,


    Thank you for your reply. This is not exactly what I'm looking for.

    My interest goes out to making sure that my full image is clickable, not a part of it.

    But I pretty much fixed it myself, I made a typo in the label for element. Now it works like a charm, really an easy way to set your own file upload button instead of ugly browser controls!


    Thanks again!


  • Profile Image
    Answered on November 03, 2014 at 03:47 PM

    We are glad to hear that you have found a way to work around it.

    Thank you for sharing your code example.