How to create a drag and drop gallery in Bubble

Setting Up the Image Uploader and Repeating Group

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. So let me demonstrate how I created this page. If I delete everything on it we put it up from scratch. So I need the image uploader or picture uploader as Bubble will call it. Put that in the center and then I want a repeating group to show the results that are uploaded. I'm going to make this responsive this is in the new response engine or 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.

Using Custom States for Drag and Drop Functionality

For working with the drag and drop repeating group plugin you don't use 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 elements for the plugins so that it works I then need to give the repeating group an ID attribute I'll just call this RG_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.

Creating a Workflow for Image Upload

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 minimizes 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 so we can go workflow and we can say when inputs value is changed so when the pitch 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 to 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 going to 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 when you're dealing with custom states you don't have like an ad or an ad to list option you basically have to 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 uploader at the end of this workflow.

Testing the Image Upload and Reordering

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 okay there's one image there's another okay 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 oh that's not quite working what's going wrong there okay there we go have it working so 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've got to do is to check 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.

Saving the Reordered Gallery

So the last thing we might want to do is to save this order so let's add in a button okay and what we can do now is let's imagine we just wanted to save this the current user we can do make changes to current user we can create a field called gallery make it a list and then we can 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 reordered data is held list of images and they 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 rather drag and drop repeating group.