Forum Academy Marketplace Showcase Pricing Features

Picture uploader to repeating group w/o saving


I’m making a mobile form (see attached image). The plus icon is a picture uploader. What I want to happen is that when a picture is uploaded it gets displayed in the repeating group. And a user can upload up to a max of 5 images. When the user selects an image in the repeating group, it gets displayed in the big area too. The thing is, i’m not saving the pictures yet because this is just a part of the form and the user needs to fill up the remainder of the form (back arrow).

Can anyone help me with this?

I had a similar issue and didn’t spend too much time trying to solve the problem as we don’t have access to the DOM etc.

What I elected to do as a ‘fix’ is when the user want to create a new thing, I make the thing in the database, and mark it with a status as SystemCreate or Draft or whatever. The user can then continue adding the pictures, completing the form etc. If they change their mind and hit a cancel button, then the thing is deleted from the db.

If the user simply closed the browser, then this is lost in the backend, and you could always run a scheduled API to clean up any with the correct status and the current date is more than x minutes/hours since the object was created. Alternatively, you could always have this as a feature, and the user can continue where they left off from the last save operation.

@DaveA Thanks for the reply. So in my DB, i have a Post table and an Image table and they are connected via PostID (unique). So I’ll add a field in the image table called draft (y/n) and when the user saves the form. it will change draft field as “no.”

Question for this, I need to tie it to a PostID prior to saving right so I’ll know which post the images belong to. How can I tell bubble to generate a unique ID and assign it as PostID when a button in the previous form is clicked so I can pass that PostID to this page and link it to the images?


I would personally use the status field for Text, this way you can have other status codes, like Draft, Published, Expired, Deleted, Archived etc.

When you add an image in the workflow, in the next action of the workflow, you would add ‘Result of Step 1’ to the post and knows which image you are referring.

You just have to remember when you start to delete things from the db, you need to also remember to delete anything from the referenced tables if you are only storing by ID field, rather than a pointer/object.

@DaveA I’m sorry, I’m not understanding the “result of step 1” to post thing. Can you elaborate on that?

To give you a better understanding of what I’m doing. My form is in a group (let’s call it group A) and there’s a button in the group that takes the user to another group (group B) where they can add more pics (There’s also a main pic that is added in the group A). So group B is just optional. The users only click the button if they want more than 1 pic in their post. If they do and click on group B, the user goes back to the group A after adding the pics to finish the form then posts it.

Another reason why I’m thinking of PostID is because I need to be able to search the post when the user is in the browse page(group). For example I have a category called Toys. Wouldn’t I need to assign a unique ID for each post considering the item name might be a duplicate name if there are 2 or more people posting the same item.

Thank you.

When you are in the wokflow, when you create a new thing, it is added to the database, but when you have more actions to perform relating to that thing, you have no way of being able to reference that thing, Bubble provide you with an option in the workflow selection list to pick the ‘Result of Step x’, where X is the step number in the workflow of the object you want to work with.

For example, if you have a new Person thing, and it has 25 fields. It probably would not be possible to edit all these fields in one workflow action, the display just isn’t big enough. So what you would do is ‘Create the new Person’ and add the first 10 fields values, in step 2, you would ‘Make changes to a thing’, the thing would be ‘Result of Step 1’ and you would modify the next 10 fields. In workflow step 3 you have 5 fields left, so you would ‘Make changes to a thing’, again this would be the object created as a ‘Result of Step 1’ and you would edit the last 5 fields.

I think this is discussed in one of the lessons somewhere.

As for your picture issue. What I have done is created a picture selector popup. When the user clicks Add image, the current classified item thing is passed to the popup, the user can select and add the picture and the popup closes. because of the realtime updating of Bubble, the Repeating group that contains the image list on the form automatically picks up the new image to display to the user.

As for the search and duplicate names, this is not an issue. Everything thing is automatically assigned a uniqueID. When you do a search for ‘Bike’ all things with bike in them would be listed in the results repeating group, if the user then clicked on one of those Bike results and you wanted to view more details on another view, you would simply pass the ‘CurrentCells thing’ to the new view and the system knows which object you are referring.

@DaveA Thanks so much for the explanation. Its so much clearer for me now. Really appreciate it.

With regards to the search, You said everything is automatically assigned a uniqueID. But if I have a Post table and an image table in the db (bec the image could be a max of 6 for each post), how can I tell the image table that these pics belong to a specific post? How are they linked? How will I know what the uniqueID is? When the user clicks on save/post, I will create a workflow that says “create a new post” save all these info to Post table and save the images to image table. But I’m missing how i’m telling the DB that they are from the same post?

Thank you very much.

On the post, you can have a field Images which is of type List of Images.

Once you upload the picture to the images table, you can also add the image thing to the list on the next workflow action.

Or you can have a field on the image that is Parent which is the of the type of the parent, and you reference it. There is a current thread in the forums about cross linking, take a read of that. There are different ways of doing things, depending on what you are trying to achieve.

Thank you so much for the thread. Read it and still wrapping my mind around it. I’m familiar with relational DBs but trying to implement it in Bubble is something I’m still figuring out.

So I was gonna save the images first and make their status “draft” but then I realized I don’t have a save button. I only have the image uploader (invisible over the + icon). Is there a way to save it automatically?

As a work around, I was thinking what if I just have 6 image uploaders and have the 5 hidden and will only show once the previous image uploader isn’t empty. But then how do I structure my db table when I have 6 image uploaders (the first one will have “main image =yes” status)?

Thank you for your patience with me…