# Upload Image via button? **URL:** \ **Category:** Mobile\ **Created:** [September 23, 2019, 4:06pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747 "2019-09-23T16:06:38Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![kthperkins](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@kthperkins](https://forum.bubble.io/u/kthperkins)\ **Post date:** [September 23, 2019, 4:06pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/1 "2019-09-23T16:06:38Z")
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. ---
**Author:** ![kthperkins](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@kthperkins](https://forum.bubble.io/u/kthperkins)\ **Post date:** [September 23, 2019, 4:40pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/2 "2019-09-23T16:40:49Z")
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. ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [September 29, 2019, 3:43pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/4 "2019-09-29T15:43:01Z")
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 ---
**Author:** ![zachwhitt](https://avatars.discourse-cdn.com/v4/letter/z/b19c9b/32.png) [@zachwhitt](https://forum.bubble.io/u/zachwhitt)\ **Post date:** [February 24, 2020, 9:39pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/5 "2020-02-24T21:39:17Z")
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. ---
**Author:** ![seth.griffin](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@seth.griffin](https://forum.bubble.io/u/seth.griffin)\ **Post date:** [February 25, 2020, 1:43am UTC](https://forum.bubble.io/t/upload-image-via-button/67747/6 "2020-02-25T01:43:42Z")
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. > [@Is there a way to trigger a picture upload through a button or icon instead of picture uploader?](http://forum.bubble.io/t/is-there-a-way-to-trigger-a-picture-upload-through-a-button-or-icon-instead-of-picture-uploader/35719/11): > > 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. ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [February 25, 2020, 5:30am UTC](https://forum.bubble.io/t/upload-image-via-button/67747/7 "2020-02-25T05:30:31Z")
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.46.05 PM](https://us1.discourse-cdn.com/bubble/original/3X/3/5/35c0226bc847bb8a6a3c0aeeb3e19fbe36863713.png) ![Screen Shot 2020-02-25 at 12.45.56 PM](https://us1.discourse-cdn.com/bubble/original/3X/a/6/a6a3313b2f7ccb921cae469c28db7992f041f455.png) ![Screen Shot 2020-02-25 at 12.45.46 PM](https://us1.discourse-cdn.com/bubble/original/3X/8/6/86fa1954157c75fad0c3fa018b97746a309273df.png) ---
**Author:** ![kthperkins](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@kthperkins](https://forum.bubble.io/u/kthperkins)\ **Post date:** [February 25, 2020, 7:25pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/8 "2020-02-25T19:25:54Z")
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. ---
**Author:** ![jaos.pcl](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jaos.pcl/32/25119_2.png) [@jaos.pcl](https://forum.bubble.io/u/jaos.pcl)\ **Post date:** [February 25, 2020, 7:51pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/9 "2020-02-25T19:51:32Z")
See this video by @romanmg [https://youtu.be/5\_sJbiM25xg](https://youtu.be/5_sJbiM25xg) ---
**Author:** ![seth.griffin](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@seth.griffin](https://forum.bubble.io/u/seth.griffin)\ **Post date:** [February 25, 2020, 8:10pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/10 "2020-02-25T20:10:43Z")
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. ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 25, 2020, 9:19pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/11 "2020-02-25T21:19:43Z")
> [@seth.griffin](#): > > In my case I wanted to mimic Instagram, a little camera icon to upload an image Just curious, do you want the uploaded image to appear in place of the camera icon, or should the camera icon always remain? ---
**Author:** ![seth.griffin](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@seth.griffin](https://forum.bubble.io/u/seth.griffin)\ **Post date:** [February 25, 2020, 10:08pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/12 "2020-02-25T22:08:35Z")
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. ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [February 26, 2020, 11:08am UTC](https://forum.bubble.io/t/upload-image-via-button/67747/13 "2020-02-26T11:08:16Z")
You can load the image in the editor ![Screen Shot 2020-02-26 at 6.23.47 PM](https://us1.discourse-cdn.com/bubble/original/3X/4/b/4b4ab9fee4cfcfe0f09461ce84e389deab884ed2.png) ![Screen Shot 2020-02-26 at 6.23.19 PM](https://us1.discourse-cdn.com/bubble/original/3X/4/7/47d898c11dc9aceaffae0fa9e72c91c9a003df41.png) ---
**Author:** ![zachwhitt](https://avatars.discourse-cdn.com/v4/letter/z/b19c9b/32.png) [@zachwhitt](https://forum.bubble.io/u/zachwhitt)\ **Post date:** [February 26, 2020, 1:07pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/14 "2020-02-26T13:07:16Z")
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? ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 26, 2020, 8:14pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/15 "2020-02-26T20:14:36Z")
> [@zachwhitt](#): > > I’d like it to remain looking like a button. I thought perhaps that resetting the input after uploading might do it, but it appears not. 🙁 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. ---
**Author:** ![zachwhitt](https://avatars.discourse-cdn.com/v4/letter/z/b19c9b/32.png) [@zachwhitt](https://forum.bubble.io/u/zachwhitt)\ **Post date:** [February 26, 2020, 9:21pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/16 "2020-02-26T21:21:18Z")
@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. ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [February 26, 2020, 9:23pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/17 "2020-02-26T21:23:47Z")
Nice! 👍 Glad you found a work-around. Beats monkeying with JavaScript. 😉 ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [February 27, 2020, 6:40am UTC](https://forum.bubble.io/t/upload-image-via-button/67747/18 "2020-02-27T06:40:04Z")
> [@zachwhitt](#): > > Reset the group the image uploader is in 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. ---
**Author:** ![xtechaus](https://avatars.discourse-cdn.com/v4/letter/x/c0e974/32.png) [@xtechaus](https://forum.bubble.io/u/xtechaus)\ **Post date:** [October 10, 2022, 12:25am UTC](https://forum.bubble.io/t/upload-image-via-button/67747/19 "2022-10-10T00:25:26Z")
how do you know when to reset the group? How can I tell [bubble.io](http://bubble.io) to show me when the picture is done uploading ---
**Author:** ![xtechaus](https://avatars.discourse-cdn.com/v4/letter/x/c0e974/32.png) [@xtechaus](https://forum.bubble.io/u/xtechaus)\ **Post date:** [November 23, 2022, 11:50pm UTC](https://forum.bubble.io/t/upload-image-via-button/67747/21 "2022-11-23T23:50:35Z")
hello ---
**Author:** ![xtechaus](https://avatars.discourse-cdn.com/v4/letter/x/c0e974/32.png) [@xtechaus](https://forum.bubble.io/u/xtechaus)\ **Post date:** [November 24, 2022, 1:11am UTC](https://forum.bubble.io/t/upload-image-via-button/67747/22 "2022-11-24T01:11:11Z")
nevermind, got it working using “when value is changed” in workflow (for anyone who comes across this in future) [Next page](https://forum.bubble.io/t/upload-image-via-button/67747.md?page=2)