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

boston85719 · 2020-11-20T19:01:09.657Z

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

Bubble

Crop Upload Image Plugin for Bubble, by Zeroqode

Crop Upload Image Plugin page on Bubble, by Zeroqode. Add Crop Upload Image in one click to your app. Bubble lets you build web apps without any code.

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

Bubble

Image Compressor and Uploader Plugin for Bubble, by Zeroqode

Image Compressor and Uploader Plugin page on Bubble, by Zeroqode. Add Image Compressor and Uploader in one click to your app. Bubble lets you build web apps without any code.

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

Screen Shot 2020-11-21 at 1.51.51 AM1255×466 34.6 KB

Screen Shot 2020-11-21 at 1.51.46 AM1235×502 34 KB

Screen Shot 2020-11-21 at 1.51.41 AM1268×655 47.9 KB

Screen Shot 2020-11-21 at 1.51.35 AM1265×598 44.1 KB

Screen Shot 2020-11-21 at 1.51.31 AM1252×418 32.5 KB

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

myflappd · 2021-01-01T20:01:01.292Z

@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.

boston85719 · 2021-01-02T06:29:21.775Z

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.

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.

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.

myflappd:

Is there a way to rename file before saving it?

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

myflappd · 2021-01-02T12:15:22.755Z

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.

boston85719 · 2021-01-02T15:34:55.737Z

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.

socialrepublic · 2021-07-28T10:26:22.370Z

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.

Screenshot 2021-07-28 at 10-19-11 Bubble Editor804×846 28.7 KB

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.

boston85719 · 2021-07-28T15:09:46.127Z

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.

socialrepublic · 2022-02-07T10:59:28.829Z

I now have a simple way to remove redundant images on AWS when they are replaced, which I have attached to this thread.

アップロードしたファイルの削除について日本語 (Japanese)

I have recently implemented a simple way of deleting redundant files on AWS when they are replaced. 1] I upgraded my legacy plan, so I could use database triggers. 2] I use backend workflows to detect a change to the image URL, and when it did, to delete the file at the ‘before change’ URL. [screenshot-bubble.io-2022.02.07-10_44_48] [screenshot-bubble.io-2022.02.07-10_54_06] I hope this helps.

whycu · 2022-07-19T23:58:41.613Z

I am dealing with the same problem right now and it is very confusing to me. I have a repeating group displaying images in a grid, and I specify the image source as dynamic images by calling an external API that returns the image file. I just realized that these files are all stored in the file manager. I don’t know how to get a reference URL to the images since I don’t see anyway to see what’s happening in the image sourcing process. Anyone has any idea how to delete the images uploaded via dynamic image source?

I also have an image cache that I download these images to a bubble database. I also saw that deleting all the files in file manager doesn’t seem to affect the cached images. Although this thread is causing me to worry that it won’t be so after a few days. But I cannot seem to find a direct link between the images stored in Bubble DB and file manager.

thanks
Amy