How to upload multiple images

[boston85719]

Usually after I spend way to much time searching for answers to things I find a need to post how to do it so that future bubblers can avoid the headache.

First install the bubble plugin for multifile uploads

After that place the element on the page. You can edit the design a bit. I made it “invisible” so that I could have a custom design for user experience

I accomplished by placing a group “on top” of the multifile upload element…however you must “bring to front” the multifile upload element so that it still functions.

Then you need to have a repeating group on the page. This is set to the value of the multifile upload element

Style your repeating group content anyway you want. However, it is important to have your database set up properly to save the images.

Notice that I have image_s3 with a type of “image”…this is the important component to save the file as an image to be able to use all functions for images such as processing with imgix

Now what you need to do for this to work is to put a icon or button into your repeating group to enable saving individual images…I have not yet created a “save all” button but assume it won’t be an issue. I am still working on all of the design aspects but have a workflow set to save the images.

It is important to remember that the “images” in the repeating group is only set to the value of the multifile upload element on page, so they are not saved to your database until this workflow event on the click of a button or icon in the repeating group cell.

It is at this point that you can save the URL to reference as an image, but to be able to use all image functions like process with imgix, you must save as a “current cell’s file:saved to S3”

Then when you want to reference the dynamic data in image elements you reference the “image_S3” and you’ll have a regular image from you database.

The above screen shot is of the bare bones user interface for saving the files. It is just a repeating group cell with reference to the current cell’s file.

I have two inputs, one is a description, the other is to change the file name.

You could also include a drop down with tag selectors and other items to save along with the image.

I am having one issue with the design though.

I don’t know how to change the look of the multifile upload element during the upload process…I’d love to have full control of the background color and content or just be able to hide it altogether.

If anybody has any idea of how to change the style with CSS or JS or how to hide it, I’d really appreciate the help on the topic.

Multifile upload design

I am trying to figure out the multifile uploader and ways that I could change the design of it. I spent the time searching and reading the forum and piecing things together to be able to create a multifile uploader that works for saving multiple images at once. Now that I know how to do that, I am attempting to make it look a bit better. I have already set up a group [51%20AM] This group is on the page “underneath” the multifile uploader element. I made the multifile uploader element have …

[SerPounce]

See my reply in the original post on the hack to hide the element.

[boston85719]

Multifile upload design

Phew, after much trial and error on how to get rid of that ugly uploader element: Put the uploader inside a group where the group is the exact size of the uploader element. Add a shape/group that is not visible but is in front of the uploader. You can customize this anyway you want to say something like “Please Wait for upload”. Add a text custom state called something like “uploading” defaulted to no. Add a workflow when the group is clicked to change the custom state to yes. Add conditional …

[stone]

You can also hide it completely and use a bit of JavaScript to trigger it.

1. Install the “Toolbox” plugin, find the “Run JavaScript” Action

2. Make sure you can set HTML ID on your elements (found in settings)

3. Set your uploader element ID to “uploader”

4. When the element is clicked, trigger the “Run JavasSript” action, and run this code:

$(’#uploader’).find(’.dropzone’).click();

[ericjasonsnell]

thank you! I was trying to figure this out and I was able to walk through this and get the basic multi file upload working and can save to the database-likely saved me hours.

[boston85719]

keep in mind if you want to keep a limit on the size of the images uploaded or to crop them to keep image ratios throughout the app and to manage your file manager through use of image URLs the multi file uploader wouldn’t enable you to do such things.

I personally ended up using the croppie plugin to help get more control over the images uploaded and keep track of important things concerning storage and file maintenance.

I ended up utilizing api workflows on a list of numbers to create in advance the images (without images uploaded, just shells basically with id) so that I could show them in a repeating group and through various ways show a croppie when the R.G. cell was clicked to then upload the images individually. The way I did it works well for my intentions of limiting users storage capacity and to set up different pricing tiers based on number of images stored.

Plus helps a lot to get images deleted from the file manager to not spend more money on storage for images not needed ( like a user who never completed their profile and don’t use the site but have a profile image loaded - I wanted to delete those after a period of non-usage )

[sayres38]

new to bubble so this is probably a stupid question - but you say it’s important to set the database up correctly…but I can’t even find a page that looks like your screenshot and have no idea what you mean by “important to set it up correctly”. Can you provide more detail, step-by-step? TIA

[sayres38]

I can’t even work out how you get a workflow item for when a group is clicked

I can do it for the button in the repeating group but not the group. Infuriating.

[boston85719]

Bubble | Build, design, and launch apps faster

I advise you to do all the lessons. That way you can understand more complex functionality like this.

Setting up the database is up to you, that is why you wouldn’t find a page that looks like my screen shot because that is my database that I set up.

@sayres38

“important to set it up correctly”

I mean to set up your database the correct way so that you can achieve this functionality.

How to learn about database models and database structure

I feel that a lot of new users struggle with bubble, not just because there is a learning curve to the bubble platform itself, but because most are non-coders and do not have a background in database design. Personally, once I began to understand database design a bit more, it had profound impacts on how I was able to build using bubble, especially when it came to ease of manipulating data. I also feel, that a lot of new users forget about Google…that powerful search engine that can point you …

Sorry, I can’t give you step by step instructions on this, as it seems you need to learn the basics first. Trying to give step by step instructions for this would result in me trying to teach you how to use bubble.

Check out this youtube channel when you are finished with the lessons I linked above.

Coaching No Code Apps

Good luck on your project. The learning curve is challenging but if you stick with it you will get over that and be able to build most anything.

[sayres38]

I am a coder and have decades of experience of database design and analysis. One of my problems is that I can’t see the database, tables and connections in bubble. I actually managed to get the upload working before I saw your response, but it’s bugging the hell out of me that I can’t see how it’s stored in the database. There’s accompanying info I want to store along with the images, and I can’t tell what is happening to the data so I can’t tell if it’s doing what I want. I can’t help thinking that it would be a lot easier with coding than it is in bubble - but i don’t really want to learn a new language. But then again, I’m still having to learn some bubble terminology so it’s swings and roundabouts. I’ve not got experience of no coding sites like this and I had expected it to be a lot easier and more intuitive tbh. The basics are easy but as soon as you stray from the lessons it just doesn’t work, with no real indication why.

Thanks for the video link, I’ll give it a watch. I plan to persevere with bubble for a bit because I’m confident that when I’ve got used to how it works it might be quite useful. I’m just worried that as soon as I stray from a “put an image here and a couple of buttons and a login screen” it’s going to get exponentially more difficult to do.

[sayres38]

Spent an hour or so (that I’ll never get back) watching the youtube videos and learned nothing. There seems to be a lot of resources on how to achieve the same very basic and bland outcome, but nothing to bridge the gap between the absolute basics and actually achieving your own goals. Eg - although I can upload and save multiple images, I can’t work out how to associate those images with individual data records in other tables. I can’t see the tables and I can’t see the code to be able to work it out. If I could see the code I’d be able to have a stab at how to adapt it - but without the code I don’t understand how its possible to work out what’s going on, beyond clicking on every available option. I feel like I am missing a “way of working” that is the key to being able to use bubble, but all documentation seems to just deal with “click here, click here, click here”

I can design the database structure for what I want - but I wouldn’t know how to build it in bubble. Creating fields in a database by first going to a workflow after creating an input seems completely arse about face to me. It complicates the construction of the database and hides the structure from the user. I’m sure it’s very clever in how it actions teh instructions, but I just find it mysterious and confusing. I’m hoping a penny drops soon, because so far I’d say that learning to code is easier than learning to no-code.

[boston85719]

This video might help

You can also check out this site.

NoCodeMinute

@J805 seems to do a great job tutoring people and has some great short videos to help people get started.

[sayres38]

Thanks for the links. I don’t seem to be able to do what the embedded video is doing but it’s difficult to tell as it’s small and has no sound. It looks like it must be a different bubble version though.

There’s an awful lot of information out there but no easy way, it seems, of finding the bit of info I need. If I wanted to create a page with a couple of inputs such as date and location and your snazzy multi image uploader, so that people could upload their holiday snaps “Benidorm”, “June 1980”, and a multiple image files, how would I store that in the database so that I could later search for all photos from benidorm?

[J805]

Thanks @boston85719 for the nice remark.

@sayres38 I’m happy to give you some tutoring lessons on Bubble to help get you started. I have students that I meet with once or twice a week on their projects and help them when they get stumped.

There is still a learning curve with Bubble and sometimes it’s good to just talk with a live person to get an answer about your project.

Check out my site www.NoCodeMinute.com and I would suggest booking a few tutoring appointments to get you going. I know I would have been way ahead of the game if I were to have had this when I was learning.

Hope that helps!

[sayres38]

Hi - Yes I’ve looked at your site on @boston85719’s advice. Bubble looks great but I’m clearly missing something and I think tutoring would save a huge amount of time and wouldn’t take much to get me up to speed. How is it done and how much does it cost?

[sayres38]

OK - found the cost. Is the web conferencing interactive? ie is it a “take control of PC” type of thing?

[J805]

Yes. I use Zoom. So you can share your screen and I can walk you through things so you get used to how things work. I can also draw pictures and arrows on the screen or even control the mouse if need be.

[J805]

If you want to schedule something this morning you can email me direct and we can set up a time. Jason@NoCodeMinute.com

I live near Los Angeles, Southern California USA. So my time zone is Pacific Standard Time (PST)

[sayres38]

Hi Jason

Can you confirm receipt of emails and money please - I’ve not had a response in a while

[J805]

I will send you a private message. Weird. I guess you haven’t been getting all my emails. I was wondering what was going on too. I sent several emails back. Maybe check your spam folder? We will get it figured out somehow.