web file uploader questions

Targets Web
1

Hi guys, Is it possible to enlarge the “+” button on the webfileuploader control?
I use a webservice to upload the pictures, i access the webapp with ios client (htmlviewer), when i press the “+” it prompts me to take a picture, can i rename this picture?

2

Now i can rename the files, but still looking for a solution to enlarge the “+” in the webfileuploader

3

You can use the developer tools to look at the structure of your page and then after the shown event, call use the executeJavascript to enlarge or change the “+” button.

document.getElementById(–WebUploader1.ObjectId–).style = “…”

4

Thank you for the suggesstion, but the id is changing after every build.
How can i set the size of the “uploader” class of webuploader control without knowing the id or im doing it wrong?

5

[quote=276758:@Roland Maszlag]Thank you for the suggesstion, but the id is changing after every build.
How can i set the size of the “uploader” class of webuploader control without knowing the id or im doing it wrong?[/quote]
You can get the id of the control by calling

WebUploader1.ControlID

in your code.

6

I looked at the code. Here is the code of the plus button (id varies) :

<div class="UploaderAdd" id="Q8AW6lQ1_add"></div>

Here is the code to have a 24 points plus sign :

<div class="" id="Q8AW6lQ1_add" style="position: absolute;left: 2px;top: -9px;font-size: 24pt;">+</div>

This can be achieved with JavaScript.

7

Thank you, but i can’t find the code part that looks like the one you posted. My xojo version is 2015r2.4.
In my code the “+” is an image, not a text.

[quote=276761:@Greg O’Lone]You can get the id of the control by calling

WebUploader1.ControlID

in your code.[/quote]
Works fine with popupmenu:
me.ExecuteJavascript(“document.getElementById(’” + PopupMenu1.ControlID + “’).style.height=‘40pt’”)

i tried to get some info back, set the size of the “+” like this:
ExecuteJavaScript(“var elems = document.getElementById(”+FileUploader1.ControlID+").getElementsByClassName(‘button’); for(var i = 0; i < elems.length; i++) {elems[i].style.size = ‘100px’;}")

ExecuteJavaScript(“var elements = document.getElementById(’”+FileUploader1.ControlID+"’); alert(elements[0].getattribute("“name”"));")

ExecuteJavaScript(“var x=document.getElementById(’”+FileUploader1.ControlID+"’).getElementsByClassName(‘UploaderAdd’); alert(x); x.width=‘100px’")

but i usually get error, that the control is undefined or null

8

If you look at the code I posted, the original line does not contain any image, but the table cell is of class UploaderAdd. That is how the picture gets there.

Removing the class enables using text instead.

<div class="" id="Q8AW6lQ1_add" style="position: absolute;left: 2px;top: -9px;font-size: 24pt;">+</div>

Basically, everything is in the line I posted for the element by ID the same as the WebUploader + “_add”

  • Use something like this to get the particular table cell :
Var plusCell = document.getElementById('"+WebUploader1.ControlID+"_add')
  • Remove the class with SetAttribute to “”
  • Use SetAttribute to add the style content
  • Set plusCell.innerHTML to “+”.
9

Not that it is super helpful right now but there is a Feature Request in feedback for a single file version of the webuploader. Really we should be able to have any button act as a file upload event.

<https://xojo.com/issue/18068>

11

I resized the controls, but when i upload a file, the controls resize back to the original size.

12

Whenever i add a new file, the control creates another “chooser” class with different id.

i am using this code:
ExecuteJavaScript(“var x=document.getElementsByClassName(”“chooser”"); var i;for (i = 0; i < x.length; i++) {x[i].style.height=‘45px’;x[i].style.width=‘50px’}")
to resize the input.

13

I have another question with the fileuploader control.
I rename the files in the UploadComplete event and store the files’ path in an array. I would like to store theese pathes in a database. Which event of fileuploader should i use, so the array elements wont be nul.

I tried:
add files
click button to upload
rename the files and store them in the array (UploadComplete event)
click another button to see what is in the array (nul)

14

You can always add a css style sheet with the styles for the chooser class in your app header. Then you’ll never need to call the javascript.

15

Does anybody have example code of how to change the + sign on the webuploader to something else like ‘Select File’ Michel?

I assume this would be Javascript that would have to execute in the shown event?

16

Found an example that Christian had posted to the Feedback case Brock mentioned above. So I have my answer.

17

Christian’s example no longer works in 2018r1 or above. Anyone come up with a solution to allow you to have another button fire the Plus button on the webfileuploader?