In this quick tip, we learn how to delete files in our file manager that are associated with things in our database.

In this quick tip, we're going to learn about how to delete files from your app's file storage.

When it comes to working with files on Bubble, it's important to note that manipulating a file that is attached to a thing in your database is not the same as manipulating the actual file in your app's file storage, the contents of which can be found in the "File manager" tab.

For example, let's say I want to create a gallery which gives users the option to add photo submissions to this Repeating Group. Users will first upload their image using the picture uploader. Now it's important to note here that this is where the file gets added to our app's file storage, and this is true for any uploader element we may use.

If we pop back and reload our File manager tab, we can see that the file has already been uploaded, it just hasn't been stored as a thing in our database yet. That won't happen until the user clicks the "Save" button in this case.

When the user does this, a workflow runs that will create a new Photo, saving the file we've just uploaded to a custom field of "Image". And once in our database, that new photo finally shows up in our gallery.

Now let's say we want to also allow our users to delete photos that they have submitted. In our example here, we have a delete icon that, when clicked, will run a workflow to delete the Current cell's thing. So when a user clicks the icon, they delete their photo in that cell and we see the thing removed from the Repeating Group! But now if I go back to the file manager, I can see that the .jpeg is still there. This is because we only deleted the thing in our database, not the file associated with it.

To fix this, we need to first include the "Delete an uploaded file" action in the workflow. Otherwise, the file will still exist in our app's file manager. This action will then reference the File URL of the Current cell's Photo's Image and delete it! But with the way our workflow is organized, if Bubble deletes the thing in Step 1, it may be gone from the Repeating Group by the time we reach Step 2, meaning we may not be able to actually reference the right photo. A good practice here would be to rearrange the actions so that we delete the file first in Step 1 and then delete the thing in Step 2.

Good file management practices like this will help prevent your app's file storage from being bloated with orphaned files, and will save you storage space for only the files your app needs.

That's it for this quick tip! For more, be sure to check out bubble.io/academy.