Is it practical to upload and reference a large number of images?

I have a vehicle fleet management application that I would like to build a web-based front-end for. There are 50 vehicles in the fleet, and 20 standard analysis reports for each vehicle, each in the form of a PNG image file. So, a total of 1000 unique image files. I would like to have two drop down menus, one for selecting the vehicle, the second for selecting the analysis type. So, when a user selects a vehicle and an analysis type from these two menus, the corresponding image file will be displayed. The image files are updated daily, so I need a semi-automated way to upload these 1000 images on a regular basis.

I’ve worked through all the tutorials on the Bubble site, and found them to be very helpful, but am not yet clear whether or not it is practical to build this type of application with Bubble, or how to automate indexing and management of the image files.

Can you provide advice on this?

Thank you!

We definitely have users that did stuff like this, and it works!

1 Like

Yes, you can upload images in bulk if they are somewhere that bubble can access. You can then ask bubble to store the image on S3 for you.

So if you uploaded an image location and an id, you can import a csv file, then run a “batch” API to import the images.

What you then need is a way to maintain the images. That would be possible via the Bubble API, but it will depend on your image management. You could do it piecemeal via Zapier or just re-upload as above.

But as above, all possible.

2 Likes

Thank you very much. I will explore those avenues for building the system.

How do you run this 'batch" api? I get the concept of hosting the files on your server, then importing a CSV with that location, but how/where do you run this Batch API to push them to s3 so that they can be deleted from my server?

Or is there a better way of importing images yet?

1 Like

The easiest is probably to have a button on an admin page

Yes but I still don’t understand how to setup a Batch API or run this Batch import. I have searched the documentation and nothing comes up for these key words.

Will see if I can put up an example in the forum app.

MUCH appreciated. I’m lost!!

Ok, so here is an example.

It isn’t all that complex, but the main issue will be finding somewhere to host the files. Google photos don’t seem to play all that well with Bubble, so I used Imgur for some test files.

So here is the page, you don’t need to display anything at all, but it gives you an idea of it working.

The FruitUploads thing can be loaded by csv, so a name and an image URL.

The Upload button then updates the thing, setting the image to be the image URL. This stores it on Bubble.

The button runs an API workflow on the list of things, and then does the update.

https://blockexamples.bubbleapps.io/version-test/uploadimages

You can clear the images down using the other button.

This uses an update, but you could just as easily use the API workflow to create things from a temporary table you have created in Bubble. So upload a list of details and image URLS, schedule the workflow on the that list, then create a thing.

  • Updated to do the important bit which was to save to S3 !
4 Likes

Hi Nigel,

I know this post is a little old but question on your example. If you have a database with more than one column of image links - so in your example say one for fruits and then another for veggies - can you save the links to S3 in one workflow or would you have to create a separate one for each? I’ve been trying to use this workflow for 2 separate columns of image links in my database but I can only get the first one to save for some reason.

I tried a couple of things. I first tried adding the second column of image links to the API workflow by adding in another key in the endpoint I used for the first column of image links (so I had one key for each column) but that didn’t work. I then tried to create a second endpoint with a second upload button on the same page but that didn’t work either. Not sure if I’m going about this a completely wrong manner but any guidance is very much appreciated! Thanks!

Not quite sure what the issue might be, maybe if you shared your app ? Or recreated what you are trying to do in a public app ?

Sure, no problem. Here is the link: https://bubble.io/page?name=index&id=imageupload123&tab=tabs-1

I’ve only tried to save the links for 2 columns for now (Pic1 and Pic2). I also just noticed something, it looks like the images for the second column (Pic2) are saving to S3 in the database itself, it’s just not showing up when I am previewing it. In this case, does it matter? I will be displaying the pics in my app so just want to make sure that just because it doesn’t show here when I’m previewing it, it won’t cause problems later when I try to pull it out of the database later for my app.

Appreciate the help!

Both Pic1 and Pic 2 seem to be uploading to S3 OK as far as I can see ?