Replace upload field with a custom upload button image

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

    Custom File upload (input type=file) button

    Hi!

    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,

    Emile

     

    =======================

    <body>

    <style type="text/css">

    .image-upload > input

    {

        display: none;

    }

    style>

     

    <div class="image-upload">

        <label for="file-input">

            <img src="button.png"/>

        label>

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

    div>

     

    body>

     

  • Profile Image
    jedcadorna
    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 http://www.w3schools.com/tags/tag_area.asp.

    You can view the sample in here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap. 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
    emilevdende
    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!

    Emile

  • Profile Image
    Mike_T
    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.