Remove images from PictureUploader (multiple image sources)

Hello :wave:,

I can’t seem to get my head around the logic for this one…

My users can add new listings with the option to include up to 4 images.

When the user is adding a new listing, I have made it possible for them to reset the inputs of the PictureUploaders by adding an ‘x’ icon:

That’s the easy part :sweat_smile:

Where it gets confusing (for me) is when the user edits an existing listing, because then any of the 4 images could be coming from 2 different sources:

  1. A new image uploaded via the PictureUploader
  2. A dynamic image from when the user previously added/edited a new listing

So… I need to be able to detect whether an image is from the database or uploaded via the PictureUploader and show the correct delete button for each scenario.

Can anyone help?

Thanks!
Zack

Hey Zack,

One approach could be as follows:

When a user uploads pictures via the PictureUploader, you could set up an event that adds the photos to the database (you can do this using the “when an input’s value has changed” event in the workflows tab – the input being the PictureUploader, in this case).
Instead of displaying the images inside of the PictureUploader, then, you could just use a repeating group. You could have icons similar to the ones you have right now in each cell of the repeating group that, when clicked, delete the current cell’s image.
With this set up, you’re separating displaying and uploading images – displaying images happens inside of repeating groups, and uploading images happens with the picture uploader. Hope this helps! Let me know if you have any questions.

Thanks for the quick reply Jacob.

I managed to make this work with the PictureUploader by using a couple of different buttons and some conditionals :slightly_smiling_face:

If the PictureUploader has a dynamic image > show ‘make changes to a thing’ button

Or

If the PictureUploader’s value isn’t empty >show ‘reset input’ button

Hi Zack,

Perhaps you already know this, but any picture uploaded via the Picture Uploader element is taking up some of your Bubble storage space, regardless of whether or not you store a reference to that image in your database. Resetting the inputs to remove the thumbnail does not delete the image from your Bubble storage.

You can check Data -> File Manager to see all of the files currently in your Bubble storage along with their size. If what you see is not what you expect to see, it might indicate that your uploads are not being properly managed. This is rather important given that many folks upload large multi-megabyte images without thinking about it. Bubble’s Imgix service automatically optimizes them for display when a page is rendered, but the large original remains in Bubble storage until such a time as it’s explicitly deleted. The onus is entirely on the Bubble developer to manage uploaded files.

If you need more info, let me know, and I can elaborate.

3 Likes

Hey Steve,

Oh wow! Thanks for the heads up. I had no idea.
Does this mean that once an image is uploaded, I no longer need the original to be stored in my file manager?

How would you suggest managing this going forward? I can see there isn’t a way to delete multiple images from the file manager in one go, and I already have hundreds of uploads :frowning:

Your advice would be much appreciated!

Thanks,
Zack

So, files in Bubble storage but without a DB reference are often referred to as “orphaned”. Here are a couple of related threads…

Besides keeping your upload storage tidy, you might consider improving the whole upload process - for you and your end users - as well as optimizing your Bubble storage by downsizing images before they’re actually uploaded. That was the whole impetus for developing Upload Buddy.

1 Like

It occurred to me that I didn’t address this question specifically. The answer is no, the “master” file must remain so that context-optimized versions can be regenerated at any time. In fact, the uploaded image IS the original. What’s shown in the File Manager are all of your uploaded (original) - i.e. “master” - files.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.