Files

Bubble provides built-in tools for uploading and storing files and images, both within the editor and in your app.

File management can be an important part of your app, depending on your needs. Some apps require publicly accessible files, like a photo-sharing platform or a marketplace displaying product images. Others need strict security to protect sensitive data, like confidential documents, personal files, or employee records.

Many apps fall somewhere in between, managing a mix of public and private files. Some files may even change their visibility based on certain conditions, for example a photo that only becomes visible if a privacy setting is marked public = yes.

This article covers how to upload, display, download, and delete files in Bubble, while keeping them secure through privacy rules.

The Bubble d atabase has two field types that support files: file and image.

Here's the key thing to understand about how these work: the field in the database doesn't contain the actual file, only a URL pointing to that file on another server. In other words, the file and image field types hold just a short string of text: the file's URL.

When you or one of your users uploads a file using one of Bubble's built-in tools, it goes through these steps:

This has a few important consequences:

Your app's Development and Live versions have separate file storage, the same way they have separate databases. A file uploaded in Development lives only in Development, and a file uploaded in Live lives only in Live. The file manager shows each version's files separately, so a file you uploaded while working in Development won't appear in the Live file manager, and the other way around.

You can upload files directly in the editor in two ways.

Go to the Data tab, in the File manager section, to see and search all uploaded files. To upload one, click Upload in the upper-right corner.

The file manager shows one version's files at a time. To see the other, use the link in the top-right corner. When you're viewing your Development files, it reads Switch to live database, and when you're viewing Live, it switches back to Development.

When you edit a database thing that has a file or image field, you can upload a file directly to that field. Bubble uploads the file and links its URL to the thing.

To delete files in the editor, go to the Data tab, in the File manager section. Select the files you want to delete using the checkboxes in the list, then click Delete in the upper-right corner. Keep in mind that Development and Live are separate.

To let users upload files, you can choose between two Bubble-native elements: the file uploader and the image uploader. Both upload files and store their URLs in the database, but each has a few differences.

When empty, both elements open the standard operating system file selector.

Once a file is uploaded through one of the elements, the element's value returns the file's URL. You then use a workflow to save that URL to a field on the relevant data type.

Private files are linked to a specific database record and inherit the privacy rules of that data type. For example, if a user uploads a cover image to their blog post, the file is protected according to the privacy rules set on the Post data type.

Keeping a file private takes a few settings, in two places: the uploader element and the data type's privacy rules.

On the uploader element, check the box Make this file private.
​

A dynamic field appears where you specify which database thing to attach the file to. In this example, we've set it to the Current page's Post.

Attaching the file to a thing is what ties its privacy to that record. Once a file is attached, it inherits the privacy rules of that thing's data type. If you attach a private file to a post, the post's privacy rules now govern the file too: the View attached files permission on the Post data type decides who's allowed to see it. Without attaching the file to a thing, there's no record for it to inherit rules from, which is why this step is what makes a private upload actually private.

​

Marking the file private on the element isn't enough on its own. It binds the file to the thing, but the thing's privacy rules are what actually control access. Go to the Post data type's privacy rules and make sure View attached files is unchecked for anyone who shouldn't see the file. This is the setting that keeps the file itself out of reach, even from someone who somehow gets hold of its URL.

Removing the contents of a file or image field only clears the URL stored on the thing. The file itself stays on the storage server, still accessible to anyone with the link. To delete the file as well, you need to run two actions, and the order matters.

Use the Delete an uploaded file action first. This action needs the file's URL to know which file to remove, so it has to run while the URL is still saved on the thing. If you cleared the field first, the action would have nothing to point to.

Use a Make changes to a thing action to clear the field that stored the URL. This makes sure you're not left holding a URL that points to a file that no longer exists.
​