Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

How to create a drag and drop gallery in Bubble

In this Bubble.io tutorial video we demonstrate how to create a drag and drop gallery and multi-image uploader using the 'Drag & Drop Repeating Group' plugin by Minimum Studio. This can be a useful element for building a dating or social media app.

I've been playing around with this fantastic drag and drop repeating group plugin by Minimum Studio and I wanted to demonstrate how to create a photo upload into a gallery that would then allow users to reorder the images in the gallery and then you can save the results.

Page design

So let me demonstrate how I created this page. If I delete everything on it we'll board it up from scratch. So I need the image uploader or picture uploader, as Bubble call it, in the centre and then I want a repeating group to show the results that are uploaded. Going to make this responsive this is in the new responsive engine, not so new responsive engine now, and set this to have three columns, as many rows as required. And this is going to show content of type, image.

Don't use Do a Search For, use Custom States

For working with the drag and drop repeating group plugin you don't do a search for. You have to basically use a custom state to display the data and that's because a custom state has got an intrinsic order to it.

So if I add in the drag and drop element for the plugin so that it works I then need to give the repeating group an ID attribute. I'll just call this RG underscore image and copy that.

Go back to the drag and drop element paste it in here. Remember to put that hash in because it is an HTML ID. Then the content type is image and the rest of that looks okay. So then I'll add an image into the first cell of my repeating group because I want to display the results coming out. I can make this full width and then dynamic image is current cells image.

Just so it displays a little bit more nicely in here I'm going to increase the height not 300, that's too much. Okay then let's build a workflow so that when a user either drags an image in or they click and they pick an image through their file system it ends up in this repeating group and we're going to do this in a way that minimises the amount of effort the user has to do to put it. So we put it in there and upload it. So we're going to automate some steps.

Workflows

So we can go workflow and we can say when inputs value was changed. So when the picture uploads input value changes we can set a state and this is the state that we're going to store the images and the order of those images in and then we can save the database based on that list of images and the order that we set using drag and drop.

So I'm just going to create a custom state on the page so that it's clear. Let's call this gallery and it's going to be of type image and then multiple entries and then set the repeating group's data source to page gallery and so then back to my workflow set state is going to be my page gallery, and then I have to take the existing list and add to it.

Custom States

When you're dealing with custom states, you don't have an add or an add to list option, which is what you get when you're dealing with database items. With custom states, you have to basically list what you've already got and then plus an item. And so we can do current this picture uploader value and then we can reset input so it clears the picture upload.

It at the end of this workflow. So let's test that out. So I've just got some images here that I've got from Unsplash that I'm going to drag in.There's one image, there's another. Here's a final image and now let's see if the plugin works. I want to reorder these. So I click and move and there we go. The order that's not quite working.

Debugging

What's going wrong there?

Okay, there we go. I have it working. Say click and you can reorder the...

Right I paused it and I've worked out what was going wrong. There are two mistakes. I've been using this plug in loads over the last few days, and these are the two things that I keep forgetting to do.

One I did not forget in this instance, which is to add the hash symbol (#) to the start of the HTML ID. I've done that. The last thing I forgot to do is to cheque show all items immediately. That is why it was behaving badly.

So let's try that again. Let's upload the ring, let's upload the yoga and let's upload the car.

Okay. And now there we go. Our reordering is working perfectly. There's no issues with our repeating group and with our drag and drop.

So the last thing we might want to do is to save this order. So let's add in a button.

Saving new order to the database

And what we can do now is let's imagine we just wanted to save this to the current user. We can do make changes to the current user. We can create a field called gallery, make it a list. And then now, because we're dealing with a database, we get these list options. We can set the list to not our custom state, but actually our repeating group itself, because that is where the reorder data is held list of images.

And there you have it. So that is how to create a way for your users to upload an image and have a gallery in which they can reorder using this fantastic plugin by Minimum Studio.

 

Latest videos

lockcrossmenu