Merge single image with a list of images

zack.strubel · 2020-06-05T17:37:24.532Z

Hello ,

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

J805 · 2020-06-05T22:30:50.460Z

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!

zack.strubel · 2020-06-08T16:46:18.418Z

Very helpful. Thank you!

J805 · 2020-06-08T18:19:22.952Z

No problem!

juan.roberto.garzon · 2020-07-28T02:09:19.939Z

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

Screen Shot 2020-07-27 at 21.21.391193×660 83 KB

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!

zack.strubel · 2020-07-28T11:10:36.465Z

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

juan.roberto.garzon · 2020-07-28T17:15:18.944Z

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

zack.strubel · 2020-07-28T19:02:01.813Z

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:

User uploads single image (using PictureUploader) or multiple images at once (using multiuploader)
User presses a ‘save’ button (for example) and the workflow is: when button save is clicked > add image/s to list
Create a repeating group to display that list of images wherever you want your users to be able to see it
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
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
I’m only a few months in to building with bubble but let me know how close I got

juan.roberto.garzon · 2020-07-31T00:39:27.279Z

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:

Remove images from PictureUploader (multiple image sources) Need help

Hey Zack, One approach could be as follows: When a user uploads pictures via the PictureUploader, you could set up an event that adds the photos to the database (you can do this using the “when an input’s value has changed” event in the workflows tab – the input being the PictureUploader, in this case). Instead of displaying the images inside of the PictureUploader, then, you could just use a repeating group. You could have icons similar to the ones you have right now in each cell of the repe…

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!

juan.roberto.garzon · 2020-07-31T01:28:07.207Z

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.

Screen Shot 2020-07-30 at 21.31.001267×704 191 KB

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?

system · 2020-08-14T17:37:26.021Z

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