- emilevdendeAsked 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!!
.image-upload > input
<input id="file-input" type="file"/>
- jedcadornaAnswered 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.
- emilevdendeAnswered on November 03, 2014 at 02:21 PM
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!
- JotForm SupportMike_TAnswered 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.