Xojo Conferences

« Tip of the day: WebFi… | Home | Xojo Training Days in… »

Tip of the day: Invisible WebFileUploader with select file button

Compared to the thing I found this morning, this one is even much better. We hide the whole WebFileUploader and move the invisible file selection area over a normal button. This way the file uploader works, but is invisible. This is a solution for feedback case 18068 and I hope Xojo, Inc. can make an official way to do this soon.

So here is the code for the shown event of the file uploader:

// connect + from FileUploader1 to Button1

js = "document.getElementById('"+FileUploader1.ControlID+_
"var chooser=document.getElementById('"+FileUploader1.ControlID+_
"_form').getElementsByClassName('chooser')[0];" +_
"var input = chooser.getElementsByTagName('input')[0];"+_
"chooser.style.cssText = 'position: absolute; left: 0px; bottom: 0px; width: "+str(button1.Width)+_
"px; height: "+str(button1.Height)+"px; overflow: hidden;';"+_
"input.style.cssText = 'position: absolute; left: 0px; bottom: 0px; background-color: #FFFFFF;opacity: 0;filter: alpha(opacity=0);width: 100%;height: 100%;';"+_

ExecuteJavaScript js

As you see it's not that difficult. We find the button and the input item from the uploader. Than we assign some css to keep the styles working and add the input area as a child to the button.

Example project: InvisibleFileUploaderWithButton.zip
03 02 14 - 14:51
two comments

This is broken in 2018rx Any thoughts on a solution?
Steve Koger - 20 08 18 - 21:25

Could not execute returned javascript: Cannot read property ‘appendChild’ of null
Source: document.getElementById(‘YYalZVnk_form’).appendChild(document.getElementById(‘pY8n6tFO’));var chooser=document.getElementById(‘YYalZVnk_form’).getElementsByClassName(‘chooser’)[0];var input = chooser.getElementsByTagName(‘input’)[0];input.accept=‘image/jpeg’;chooser.style.cssText = ‘position: absolute; left: 0px; bottom: 0px; width: 100px; height: 22px; overflow: hidden;’;input.style.cssText = ‘position: absolute; left: 0px; bottom: 0px; background-color: #FFFFFF;opacity: 0;filter: alpha(opacity=0);width: 100%;height: 100%;’;document.getElementById(‘pY8n6tFO’).appendChild(input);
TANCO MAURICIO ANDRES - 08 03 19 - 14:05

Remember personal info?

Emoticons / Textile

Hide email:

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.