Upload Image via button?

Is there a way to upload an image via button to change the current PictureUploader? Without having to use JavaScript? The only questions related to my question are mutli-images when I’m trying to just do one upload.

Also, how do I get an uploaded image to appear in a separate data field. For example, A user uploads an image but I also want a couple to go under the Photos database.

NM. For now I’ll focus on that option later but if you figured out please leave the answer for people who might need it in the future.

Yes you can use a button to change the picture uploader…set it up in a workflow…when button is clicked…then change the value of the image in your D.B or if using a custom state change that

not sure what you second question is about though…i assume you are asking to save the image in a second location in the d.b. it is not complicated just create another datatype with a datafield of image and save the uploaded image to both

I’m interested in this as well, but I’m not sure how to open up a dialog to pick the image to upload. I’d like to use a button vs the built in picture uploaded.

I don’t think there’d be a way to do this other than with some javascript. I got it to work with the help of this post.

1 Like

Don’t listen to anybody saying you need to use javascript to do this…it is easy

Just design your picture uploader to look like a button

@seth.griffin try this method instead of the javascript, it is much more straightforward.

Screen Shot 2020-02-25 at 12.45.46 PM

1 Like

Thanks. I forgot about this post. I’ve been so busy focusing on the important aspect. Lol.

The second one was about uploading multiple pics after the first main one has been uploaded.

See this video by @romanmg


Ah, I guess you’re right if you just want it to look like a button. In my case I wanted to mimic Instagram, a little camera icon to upload an image, and that Javascript snippet worked quite simply for that case.

Just curious, do you want the uploaded image to appear in place of the camera icon, or should the camera icon always remain?

The camera icon remained. So i had the image uploader as 1x1 pixel on the page and then clicking the camera icon would prompt the user to choose a file or take a picture.

You can load the image in the editor

Screen Shot 2020-02-26 at 6.23.47 PM Screen Shot 2020-02-26 at 6.23.19 PM

My problem is the “button” (either image of a button or actual picture uploader button) converts to an image once the first image is uploaded. I’d like it to remain looking like a button.

@boston85719 it looks like the “button” still converts into the new uploaded image using your method, right?

I thought perhaps that resetting the input after uploading might do it, but it appears not. :slightly_frowning_face:

That said, I have an enhanced uploader that I developed for use internally. It does this and more. I may be releasing it to the marketplace (not free though) after I add a couple features that I need.

1 Like

@shot Ah ha! Your suggestion made me thing to try something else, which worked. Reset the group the image uploader is in, and the picture will reset to the original.


Nice! :+1: Glad you found a work-around. Beats monkeying with JavaScript. :wink:

1 Like

I almost always put any type of input into a group so that I can reset it properly. The bubble built in workflow of reset input doesn’t help when you have more than one input on a page so the group method is how I ensure proper resetting of inputs.

A whole bunch of other issues you may want to consider when uploading images…

  1. file size (cost of storage is directly impacted so it is important when considering monetizing your app through subscriptions etc.)

  2. file name (helpful for SEO purposes and URLs etc.)

  3. image dimensions (affects the layouts of your pages, especially when considering product images in repeating groups of search results)

  4. file manager for deletion (this is also associated with storage of the app. When a user deletes or abandons their account on the app you need to delete those files from your file manager so that you are not paying for storage of images not needed)

  5. alt text (also associated with file name and useful for SEO purposes)

Because of all these other considerations I abandoned the bubble image uploader and instead use the croppie plugin to upload images as it gives much greater control over all aspects I find important when managing images.


how do you know when to reset the group? How can I tell bubble.io to show me when the picture is done uploading


nevermind, got it working using “when value is changed” in workflow (for anyone who comes across this in future)