Best Approach to Image Uploader File Storage Issues

boston85719 · 2020-11-08T08:23:07.185Z

The image uploader and file uploader elements by Bubble automatically upload those files to the file manager as soon as a user chooses a file.

If the user decides to click the uploader again to change their selected file, again, the uploader will add the file to file storage once the user chooses the file.

A user can repeat this process dozens of times and you will end up with lots of ‘abandoned files’ in file manager eating up costly storage capacity.

What is the best approach to mitigate this to ensure that only the final selected file is saved in the file manager (more like, how do you delete the ‘abandoned files’)?

boston85719 · 2020-11-08T10:22:29.231Z

Right now I decided I will use some conditional values and an overlay group with text element inside.

Screen Shot 2020-11-08 at 5.18.27 PM

When the picture uploader value is not empty the picture uploader is set to be disabled. When the picture uploader value is not empty the overlay group is visible. When the overlay group is not hovered the background is transparent and the text element is not visible.

When the overlay group is hovered the background color is white with 90% opaqueness and the text element is visible. When user clicks the overlay group the workflow deletes the picture uploader value URL

Screen Shot 2020-11-08 at 5.20.34 PM

Then reset the group that contains all elements to reset the picture uploader element

Screen Shot 2020-11-08 at 5.21.07 PM

Then the picture uploader will be empty, the overlay group is not visible and the uploader is enabled again so a user can click it to upload a new image.

I’d like to hear other ways of doing this that are less cumbersome.