Is there a way to trigger a picture upload through a button or icon instead of picture uploader?

[d.norkus]

Is there a way to trigger a picture upload through a button or icon instead of picture uploader?

[sridharan.s]

Sure. One way would be to include the picture uploader as a 1x1 pixel element so it’s not really visible to the user. Then, when someone clicks, say, a button elsewhere on the page you could run some javascript to click the picture uploader. It’d look to the user as if clicking the button opened the picture upload screen.

[rico.trevisan]

What if you put a group element on top of the picture and have that group clickable?

[d.norkus]

That is a really good idea! Would you be able to share javascript piece of code how to start the workflow? I installed the toolbox plugin to run it. Many thanks!

[sridharan.s]

You’d just need a line of js code that clicks the element based on the element’s ID - plus, you’ll need to add an ID to the element. I don’t have the JS but I’m sure someone has posted some JS in the forums that’d work for this.

[d.norkus]

I got to this point: I have this js line: $( “#myElement” ).click(); which spouse to trigger in my case picture uploader, however haven’t managed to make it work yet. I think it is something to do with element ID. Maybe you would know how do I define it?

[sridharan.s]

If you click to edit the element, there should be an element ID field at the very bottom.

If there isn’t, then you’d need to go to the editor and turn on element IDs (it’s in settings and near SEO options)

[ryley.randall]

Using the toolbox plugin you are going to create a workflow that runs JavaScript.
As direct above, give your picture uploaded the an ID, in my example let’s say it’s
photoclick
Then in the run JavaScript work flow put the following code
document.getElementById(“photoclick”).click();

That should do the trick

[d.norkus]

getElementById

thanks, however it doesn’t seem like working ether.

[d.norkus]

maybe it possible can not locate the element in the document?

[viably.co]

document.getElementById(“photoclick”).click();

I see this is an old thread however still it looks unresolved, I just ran into this issue and the solution that worked for me was to use the javascript with the toolbox plugin using the following code

document.getElementById( ‘id-name’ ).getElementsByTagName( ‘input’ )[0].click();

I hope that helps.

[ion.petrea]

I defined an ID for my picture uploader however I am not sure what tag name means. I used input, picture uploader, picture and it didn’t work. When I use the code without getting the element’s tag name it still doesn’t work.

[d.norkus]

Hey, just use this java code: $(’#pictureuploader input’).click()
where pictureuploader is your ID attribute.

[viably.co]

with the code:
document.getElementById("id-name").getElementsByTagName("input")[0].click();

you only need to change id-name for your id you have set in bubble, the rest is just targeting the input within the object… in other words you don’t need to change the TagName.

@d.norkus solution is doing the same thing just using jQuery which will also work.

[ion.petrea]

I get an invalid token error if I don’t check “Asynchronous” but either way still no result. Here is a test app:

Bubble Editor - huhuhgkgkg

What I am doing wrong?

[viably.co]

I can’t access the app, I’d be happy to jump on a Skype call and help you get it working.

[scottb50]

Instead of JS, you could use a default image or restyle the uploader so it looks like a button.

[d.norkus]

I also can’t view your app, however have you ticked on ID attribute checkbox in general settings? It could also produce an issue if element is placed in a repeating group or your browser is blocking pop ups… I can’t think of what more could be failing in this case.

[ion.petrea]

Thanks everyone for replying. Here is the link to the app https://huhuhgkgkg.bubbleapps.io/version-test?debug_mode=true

But how can I share the app so you can view and edit it?

[melon]

Goto Settings --> General --> Privacy & Security --> Application Rights --> Make it editable and share the link on address bar