Replace WebFileUploader with a image?

How can I replace a WebFileUploader with an image, for aesthetic reasons?
Thank you for your solutions…

You could make the WebFileUploader invisible and then trigger the file selection like this:
ExecuteJavaScript(“document.getElementById('” + FileUploader1.ControlID + “_file’).click();”)

3 Likes

I have a error !

You copy/paste the text from the forum and the forum changes regular quotes to curly quotes.

This happens when code is added to the forum but not inside a code block.

Note: this doesn’t mean I reviewed or tested the code and it will work changing the " to "

1 Like

ok indeed.
It works, but only on the computer when I click, on mobile no reaction!

on ios that is not supported.

So there’s no other solution?

There are multiple solutions. You can find another JavaScript that works on iOS, you can make your own control with WebSDK, you can look for Controls offered by third party developers (e.g. graffitisuite has an uploader, don‘t know if it does what you want), you can make a feature request for Xojo itself and you can pay for someone who makes a custom control for you.

3 Likes

It doesn’t work in Safari on mac either.
I think is a security ‘feature’ because you are clicking one control (image) trying to activate another (fileuploader).

2 Likes

I was going to suggest to use an Icon instead of caption, but:
#76555 - WebFileUploader can’t add a Bootstrap Icon

1 Like

duplicate of https://tracker.xojo.com/xojoinc/xojo/-/issues/75450
( I was first !!!)

2 Likes

If I use a “WebButton”, can I trigger the webfileuploader without using javascript?

pretty sure you can’t…

1 Like

Fixed, thanks!

2 Likes

I think you won’t be able without JavaScript.

Here is a way, place this code into the Opening event of the control you want to use as a trigger (for example, a WebButton, or a WebPicture):

Var target As WebFileUploader = FileUploader1 // Change this with the name of your WebFileUploader control name
Me.ExecuteJavaScript("document.querySelector('#" + Me.ControlID + "').addEventListener('click', () => { document.querySelector('#" + target.ControlID + " input').click(); });")

It seems to be working on iOS and Android.

7 Likes

Thank you very much for this great step forward :pray:
It works for WebButton and WebCanvas but not for WebImageViewer :disappointed_relieved:
Now I need to find the code to display my image in a WebCanvas

1 Like

Uhm, I’ve tested it using a WebImageViewer and it worked. I don’t know why I wrote WebPicture above, but I meant a WebImageViewer control.

Try this sample project:

https://github.com/piradoiv/xojo-webfileuploader-with-webimageviewer/archive/refs/heads/main.zip

2 Likes

I updated Xojo, and now everything works! :upside_down_face:
Thanks again to all for your help, time spent :pray:

1 Like

staying in the same topic, is there an example project where you can drop a picture file on a webfileuploader ?
and so drop a picture on a webimageviewer and get it uploaded to the server ?