Hi. Some time has passed and I forgot about this post. The problem was that I was hiding the pictureuploader ( I didn’t want it to be visible). Thanks for the help anyway.
2 Likes
doesnt work on mac osx chrome 
It works with no problem when using file/picture uploader but when using the “Multi-file uploader” plugin from bubble I get the following error: “Cannot read property ‘click’ of undefined”
For anyone who still has this problem, I’ll share a solution. You can use this also for multi upload.
$(‘.inputcssclass’)[0].click();
Just look at the css class of the input via inspect.
Hi,
can you give more detail explanation? I need to trigger multifile uploader but have no idea with that css class…
Thanks for help
Hello. I am trying to give an ID to an element from a repeating group. I use the “unique_id” of that cell’s object as the ID name. However when using the toolbox to perform a click it doesn’t work. Any idea why that might be?
Update: tried to use cell’s index but still it doesn’t work.
This is a solution!
2 Likes
I can’t seem to find the css for the multi file uploader. Please help
For those who still want to use multi-file uploader(I’ll type mfu for short) with a button or icon or anything clickable, here is a more in-depth explanation of how I did it because the post that addressed it didn’t work for me. I wrote this with non-coders in mind as much as I could. I’m elementary as well, so bear with.
There are three methods I got to work for me, I’m sure advanced coders can find a lot more.
-
Works for only when there is only one mfu on the page that you want to trigger. You can have multiple mfus on the page, but only the first one (first in order of top to bottom, and if the elements have the same vertical position, then left to right) will be triggered.
-
Works for the specific mfu that you want based on its order(Again, it’s ordered from top to bottom, and if the elements have the same vertical position, then left to right)
-
Works for the specific mfu that you want based on its ID Attribute.
For all the methods, as at least one other post mentioned, you’ll need the css class of the mfu. For the sake of the illustration, the mfu’s message to display is “Multifile Uploader With “Multi” as ID Attribute” and I created a button called “Test Multifile upload”. Right-click the mfu and hit inspect to get the css class name.
The class is ‘.dropzone’(yellow highlighted-under the div class-dropzone needsclick dz-clickable. This is chrome, but other browsers will be similar.)
Go to the workflow tab and under the button workflow, use the action run javascript from the toolbox plugin.
- Again, this is for when you only care to trigger the first mfu on the page. The code is
document.querySelector('.insertcssclass').click();
or specifically
document.querySelector('.dropzone').click();
- Again, this is for when you have multiple mfus on the page and you want to select a specific one based on the order on the page the mfu appears. If you’re trying to trigger the first mfu, use
document.getElementsByClassName('dropzone')[0].click();
Don’t put a period in the class name, the code won’t work. The “[0]” is how you’d select the mfu. Since javascript uses zero based numbering, [0], would be the first mfu, and [1] would be the second and so on and so forth. Again, the mfus would be ordered from top to bottom, and left to right. Feel free to test it with two mfus and put the 2nd mfu at least below and/or to the right of the first mfu, then change the number to “[1]” in the code.
- This is ideal for having multiple mfus on the page and want to pick a specific one without considering the order on the page the mfu appears.
Use
document.getElementById("multi2").getElementsByClassName('dropzone')[0].click();
if your ID Attribute was “multi2”. This code just simply means, click element [0] or the first element that has the ID attribute of “multi2” and has the classname of “dropzone”. If you’re properly creating unique ID attributes for each element, this works. I’ll guess that even if the ids are not unique, it could work, but you’d probably have to change the “[0]” to the number you’re looking for. As a general rule, each id attribute you name should be unique.
I hope this helps someone. I gave up trying 9 months ago, but I’ve learned a little more since and felt like taking another crack at it.
9 Likes
I did not seem to get this solution to work on a picture uploader element. Can someone share an example of actual working solution?
1 Like
Another alternative is to use the Image compressor plugin provided by @ezcode . You will be able to trigger the upload of a picture from any element along with its compression (size), and believe me, that’s great. Once compression is done, you can “upload” the image in your DB and attach it to any thing.
I bought this plugin and I’m not using any other image uploaded anymore. And my app perf are better for page loading.
3 Likes
The Javascript snippet I use to trigger the picture element uploader is:
document.getElementById("profilePhoto").getElementsByTagName("input")[0].click();
where you have given the pictureuploader a unique ID of “profilePhoto”
For me, especially helpful when I want to put a button over the uploader to use for profile photos etc:
4 Likes
I found a much simpler method to use a button to to load a picture into an image element with no javascript.
- Place a button on the page and call it Upload Photo (or whatever)
- Place a file upload element over top of the button, and set the style to blank so that you can change the font to 100% transparent and the same for the background colour (100% transparent).
- Right click on the file upload element and Bring to Front
- Place an image element on the page, set the Dynamic Content to "File Upload File’s Value
If you want to restrict the types of Image file types
5. Add an alert element to your page to tell the user “Only jpg, jpeg, png, or gif area allowed.”
6. Add a workflow step to limit the file types to jpg, jpeg, png or gif. Go to workflow and click on Click here to add an event and select Elements → An Input Value is changed
7. In the Element select the File Upload File and then set only when
"This FileUploader’s value’s file name does not contain “jpg” or This FileUploader’s value’s file name :lowercase does not contain “jpeg” AND This FileUploader’s value’s file name :lowercase does not contain “png” or This FileUploader’s value’s file name :lowercase does not contain “gif”
You can add more file types that you allow by adding more “AND” conditions
- Add an action to “Show message in an alert box” and select your alert message.
- a) Because these actions only fire when a file that is not allowed is uploaded, we want to add an action to reset relevent inputs.
9…b) If you have other elements on the page that you may want to reset, place the above in a group and use the group reset.
4 Likes
Thanks for the solution!
This worked! Thank you 
thanks! it’s works and so easy!
Is there also a way to trigger a dropdown using this method?
I tried it but was unable to achieve it …
Just add the picture uploader over the element and then add a CSS:
#hidden { opacity:0; }Hey @J805, can your method work to pre-load the image with dynamic data from the database? Currently if I set the image background to Do a search for Type: image it will show the image in place of the placeholder but the uploader is technically still “empty” and the green plus uploader is present. Is there a way to pre-load the uploader ahead of time so that it’s not empty and the remove icon is displayed?