Beating a Dead File Upload Horse

I have used both the Xojo built in file upload control and the one in the Web Custom Controls by Daniel Taylor.

It seems I have some frustrated users that don’t feel the Xojo control is very “friendly”.

Has anybody had success in creating a “super simple” file upload method for a single file?

In an ideal world it would have a single button where I could control the style and caption. Click the button, browse for the file (with the browser/OS provided file selection dialog), pick a SINGLE file (or cancel), and when selected it would upload with some sort of ability to show a progress bar.

So many things in Xojo work well but this functionality feels a little “clunky” to me.

My apologies in advance for the bad horse metaphor. ;-))

I feel your pain. The WebFileUploader is just…not good. It’s not how we want to use it and it has some serious limitations. Unfortunately, I’ve not found a replacement. To be fair, I haven’t looked for a few years…

HTML5 has the File API but this is not trivial for me because it is beyond my fluency in JavaScript, DOM, etc. There are lots of examples on the Web that probably could be adapted.

I would pay for a decent control.

You can reduce the whole web file uploader to just a plus button.

And you can hide the button as shown here:

Once button is invisible you can put a different one there.


I just tried the example project.


As we would say in the USA, “A little off the wall” but it seems to make the upload process much more friendly.

Hopefully I can add some additional logic. Like not allow the upload button to be active or display a message if no file has been selected.

Thanks, Mark

Is it possible to rename the “+” for the Add to something else ?

Sure, you have to hack the DOM some. When you upgrade Xojo versions you will want to test thoroughly. Add this code to your file uploader ‘Shown’ event:

Dim _btnHide As Text
_btnHide = “document.getElementById('” + me.ControlID.ToText() + “_add’).style.display = ‘none’;”

Dim _btnPadLeft As Text
_btnPadLeft = “document.getElementById('” + me.ControlID.ToText() + “_buttons’).getElementsByClassName(‘button active’)[0].style.paddingLeft = ‘20px’;”

Dim _btnExpandButtonWidth As Text
_btnExpandButtonWidth = “document.getElementById('” + me.ControlID.ToText() + “_buttons’).getElementsByClassName(‘button active’)[0].style.width = ‘100px’;document.getElementsByClassName(‘chooser’)[0].style.width = ‘120px’;” // Width + Padding. Makes the left click to add files functional beyond the small square that held the + symbol.

Dim _btnText As Text
_btnText = “document.getElementById('” + me.ControlID.ToText() + “_buttons’).getElementsByClassName(‘button active’)[0].innerHTML = document.getElementById('” + me.ControlID.ToText() + “_buttons’).getElementsByClassName(‘button active’)[0].innerHTML + ‘Upload’;”

me.ExecuteJavaScript(_btnHide + _btnPadLeft + _btnExpandButtonWidth + _btnText)

This will only work if there is only one file chooser on the page.

Cool! Thanks. I’ve still have not found a way to explore the DOM for the web controls yet so didn’t know what each is called.