Merge single image with a list of images

Hello :wave:,

My app currently allows users to upload ‘listings’ which include a single image, however, I am now working on a way to allow users to upload a list of images which will be displayed in a slideshow.

I don’t want to lose the user’s single image when I make the switch, but I’m not sure of the best way to merge the two data fields (single image and list of images).

As users will need to be able to delete their images, it’d be ideal if I could merge them into a single field.

Is there a good way to do this?

Thanks,
Zack

Hey there!

There are many ways to do this, here is just one suggestion:

One way way to do that is set up the new data without deleting the old data at first.

Then create a backend workflow that will modify your listing. Make the key your listing, type listing. And for the step 1 you can do this for example, listing image list > add > listing’s single image.

You can create an admin page for just yourself where there will be a button on the screen that you can press to activate the backend workflow. For the workflow just say, run a API endpoint on a list where the source of the data will be all of your listings. The listing will be this listing.

It will just run through each listing and do the work for you on the back end.

Just run it at a time where your users won’t be bothered by a slow down if you have a gigantic list or something.

Want to learn more?

www.nocodeminute.com

Presenting

Hope that helps! :blush:

Very helpful. Thank you!

1 Like

No problem! :blush:

Hi @J805

Appreciate your response on this as I am having the same dilemma as @zack.strubel is, regarding this matter.

Here’s what Im trying to do: To separate the edition of each image of the list on different steps and adding a conditional to prevent repeated images to be uploaded. However this doesn’t work

So I understand that deleting the old data could be a possible workaround, however, I don’t have this concept very clear on my head. And honestly, I can quite grasp the solution you are proposing on this thread. Is it possible for you or for @zack.strubel o maybe share a few screenshots or one showing how it looks on the editor? I know it’s kind of a hassle but I would truly appreciate your extra help on this one guys.

Thanks in advance and best of luck!

Hey Juan,

Will do my best to help although @J805 is probably the expert here.

Based on your post, I’m not sure I entirely understand what you are looking to achieve. Could break down the desired workflow step by step?

Thanks,
Zack

1 Like

Hi @zack.strubel thanks for your quick reply man.

Well, is hard to break down the workflows. Lol, As I don’t know how to make it work the way I want. But the goal is basically to set a workflow that allows the user to initially upload a list of images and then edit them. The problem is that images repeat or are not saved in the desired order. That is the part that I need help with.

How did you work out your issue? I think that maybe I could get an idea by watching your workflows. If that’s ok, off course.

Thanks again bro

Ah ok, so this sounds different to my original question because I wanted to copy existing images uploaded by users into a new list of images on their behalf. This had nothing to do with the user being able to do it themselves and was done using a backend workflow (API).

If you want your users to be able to upload images to a list and then edit the list themselves, you can achieve that by:

  1. User uploads single image (using PictureUploader) or multiple images at once (using multiuploader)

  2. User presses a ‘save’ button (for example) and the workflow is: when button save is clicked > add image/s to list

  3. Create a repeating group to display that list of images wherever you want your users to be able to see it

  4. Add an image and a ‘delete button’ in the repeating group cell and set the data source to where the image list lives. Then when user clicks delete button > delete this cells image

  5. Sort that list however you want (by date added etc) so it will be in the order you want

Apologies if I’ve assumed a whole lot here :wink:
I’m only a few months in to building with bubble but let me know how close I got

Hi @zack.strubel Thanks again for your help. I managed to edit the list of images by first clearing the list and then adding the existing images from the picture uploaders. All this from the same workflow.

Now I have the issue of clearing the picture uploader whenever a user want to delete one image from one of the uploaders. Something like you mentioned on another thread:

Could you elaborate on this please? or maybe show the workflow so i can get an idea of how you accomplished it.

Thanks in advance man!

Yo @zack.strubel Just figured out a way, by using a state with a conditional.
However, now that the uploader and the thumbnail (that is a different group used to select and show each uploader) is empty as well; there is an empty space on the grid of the thumbnails.

That’s what I’m trying to work out now. How to make the thumbnails grid responsive? To react in a way a repeating group does, by adjusting the content. However, I cannot get to work a repeating group as the thumbnail grid, as I cannot find a way to show the corresponding picture uploader when a cell is clicked.

I also thought about replacing the default values for each picture uploader when a condition is true, such as when PicUp 1 is empty and PicUp2 is not then PicUp1 value is PicUp 2. This causes a conflict on the values for the following uploaders tho

I know its complex and requires a lot of thought however I think this could benefit more people as this could be a nice way to manage Images Lists.
What do you think?

This topic was automatically closed after 70 days. New replies are no longer allowed.