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.
Unlock the power of drag-and-drop: Create stunning image galleries with ease using this fantastic Bubble plugin!
Master custom states: Learn how to leverage custom states for seamless image reordering and gallery management.
Automate your workflow: Discover how to streamline image uploads and gallery updates with efficient workflows 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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.