Forum Academy Marketplace Showcase Pricing Features

Am I Dreaming - This Can't Be Real - Image Saved No File Manager File Stored

I have been trying to find a way to make uploading images better. I have decided to test out some paid plugins for the task and implemented something that I don’t know if it will cause an issue.

I set something up that allows for an image to be uploaded but not take up any space in the file manager…which implies it does not take up an Bubble Storage.

I used the Crop Upload Plugin

This plugin allows me to upload an image, pre-set a ratio and then have the user expand the size of the cropped area while maintaining the pre-set ratio…it works beautifully and I am excited about utilizing it.

One of the better parts is nothing is stored to your file manager until you trigger a save action in the workflow.

Then I am utilizing the Image Compression plugin

This plugin allows an image to be uploaded and compressed, or to compress an image using a URL. Works perfectly, really reduces file size while maintaining image quality.

WHAT I DO NOT BELIEVE though is that I have set up an image upload and compression without keeping a file in my Bubble Storage, although the image is accessible and saved in my database.

This is how I set it up

This set up is taking an uploaded file from my device, letting the user crop it, then save it, which then triggers the creation of a file in my file manager with a URL component. After that I use that URL to compress the image, after compression save it to the D.B. as a data type and finally deleted the file from the file manager.

The thing about this is that the file I delete from the file manager is not the same file that is saved to the D.B…in the D.B. the data type is saving the compressed image, but the file being deleted from the file manager is associated with cropped image.

I am still able to see the image in the D.B. and display it on page in an image element.

Is something going to cause a problem in the future? Would I realistically be able to save images in the D.B. and not have them take up storage capacity in my file manager?

Here is a Video of the setup in action

2 Likes

@boston85719 This is very smart way of handling images. Has your experience been okay with this method so far. Is there a way to rename file before saving it? It would be awesome to save original on external storage (as its cheaper and backup of original) and save the renamed cropped and compressed version in Bubble.

When I communicated with Bubble support and one of the plugin developers it was explained to me that there are a few potential drawbacks and a few others came to light.

  1. Bubble support mentioned that there could potentially be issues with extracting the image file…it seemed like it was a potential issue for downloading, which I didn’t try and was implied it was a potential in the future, but not an immediate issue.

This did not seem to imply there would be any issue with retrieving and displaying the images on the app though.

  1. The developer did not build the plugin with an intention of having it used to manage files in the file manager. There is a ‘bonus’ feature to upload the compressed file directly into the database, and the file manager. However, there is no URL associated, so it is impossible to delete from the file manager unless done so manually.

However, the compressed file is not automatically uploaded to the file manager and so it is an issue that could be avoided.

I’m not sure, I wasn’t focused on this and did not test for it.

1 Like

Thanks so much @boston85719 for a detailed response. That’s very helpful.

File management is just so challenging in Bubble for a newbie. I wish there was a simple way to manage files.

Things to keep in mind are the fact that a file uploaded through a normal Bubble uploader (image or file) will have an AWS file URL associated with it, which can be accessed through a dynamic expression to delete that file from the file manager.

So using the built in workflow to delete an uploaded file, in the URL you can do a dynamic expression like ‘current users profile image URL’ where the URL part needs to be accessed by clicking more after the profile image (if the user data type has a field for profile image) and that when deleting a data type, any files associated need to be deleted first, so that you don’t use that reference to the URL.

The other thing is to use the make file private and use attached to, although I am not sure if this actually makes it not visible to other users, so not likely the best thing for images meant to be displayed publicly.

1 Like

Thank you, @boston85719 for a super-helpful post. The steer to the Crop Upload Image plugin was invaluable for cleaning things up here.

I thought I would add a finding, as I found Bubble’s handling of images a mysterious process.

I wanted to keep the files stored on Amazon to an absolute minimum, so I thought I would see what happens if you save the image to Bubble’s DB and then remove the file from AWS in the workflows using workflow action Data (things) > Delete an uploaded file > image URL. (This is full-on, guerilla space-saving.) To my surprise, it seemed to work. You can delete the Amazon file in a workflow after saving it to the BD, and the image will show in the app. Result! This offered the possibility of never having dead files in AWS storage. It bugs me that I can’t tell which images are used in the app and what was deadwood. Read on.

I said it worked … But only for a couple of days or so. The problem is that after a while, nothing appeared in the user’s profile when using the app. The DB record said it had ‘something’ - it did not behave as if the image was empty. I have conditions to show a default image if the user did not submit a profile image, and they were not being actioned. So I had a load of blanks appearing in the app.

It seems as though there is some sort of routine housekeeping on Bubble’s side that checks the link between the database and Amazon. It sweeps the database of content using what’s on AWS as the clue to whether it should throw some sort of switch in the DB or not. But it does not empty the database entry completely, so any ‘is empty’ clause would not work.

Moving on, I now remove the old file, when a new one is saved to replace it. I do this, when saving a CropUpload.

On the subject of cleaning out redundant images on Amazon, it would help to get an index of all the files from AWS that belong to the app, so a reconciliation could be done with what’s in an app, to reveal those with no links in Bubble. I have no idea if this is possible.

Thanks for replying with those findings. That is good info to have. I actually never implemented this setup personally. Glad I know to steer clear of attempting something like it.