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:
A new image uploaded via the PictureUploader
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.
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.
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.
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
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.
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.