I am trying to make a multiple image uploader(having multiple groups) similar to this in bubble (what shown in figure is a group which i want to be an part of one repeating group and able to create one more on clicking add more and so on) , but not able to do it properly .
For a single image upload i am successful but for multiple ones i am not able to think how should i approach this problem . should i use a repeating group , if yes then how .
i want to populate a similar upload panel after clicking add more button and want to submit all of them in one go , also for its backend side there is a complex workflow involving many steps . please help .
Actually i want all 4 of them whats shown in group to be part of one group , and then on adding add more , another 4 of them (a group should be added) . the photos will upload one at a time but will get submitted together . one group will be one entity as json file in api request . what changes do i need to make .Any solution would be appreciated . i am new to bubble .
To build a multiple image uploader as depicted in your reference image, you’ll need to leverage Repeating Groups (RP) and Custom States.
Start by integrating an image uploader and styling it to resemble the “Add More” button shown in your image.
Next, assign a Custom State to this uploader, setting its type to “image” and configuring it to handle a list.
Then, set up the Repeating Group (RP) similar to what’s displayed in your image, with its data source linked to the Custom State of the uploader.
Proceed by crafting a workflow triggered by the event “When image uploader value is changed”. This workflow should include actions to:
Set state the costum state of the uploader, where you will add the image
Reset relevant inputs
Finally, configure the “Submit” button. This button’s actions will either create new entries or modify existing ones in your database, depending on your specific logic.
I have decided to give this a shot. @Bruno_Duarte summarized nicely. If you don’t know how many more files can be added by the user, you have to use repeating groups and custom states. See the demo below:
Simply, the repeating group is a displaying a bunch of text from its custom state:
This text is just for the built-in files you request. So I add this initial list when page is loaded:
hey thanks great .
actually i want all 4 of them whats shown in group to be part of one group , and then on adding add more , another 4 of them (a group should be added) . the photos will upload one at a time but will get submitted together . one group will be one entity as json file in api request . what changes do i need to make .
hey thanks great .
actually i want all 4 of them whats shown in group to be part of one group , and then on adding add more , another 4 of them (a group should be added) . the photos will upload one at a time but will get submitted together . one group will be one entity as json file in api request . what changes do i need to make . Thats the problem not one image as repeating group , but 4 of them , and the bigges issue is in writing workflows .
I am sorry, I didn’t get it, so you pretend to add 4 images in once when you click “Add More”?
In that case you need to install the plugin Multi-File Uploader Dropzone by Bubble, and do all the same process, but instead of using the Upload Image element, that you can only upload one image a time, you can now upload as many you want.
The only diference compared to the first scenario, you need to add a new action on the workflow where you will “reset” the Custom State.
PS: on this element, you can set the maximum number of elements per upload, but be aware that you can upload all kind of files.
