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+_
"_form').appendChild(document.getElementById('"+Button1.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%;';"+_
"document.getElementById('"+Button1.ControlID+"').appendChild(input);"

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