Files
This section covers how Bubble handles uploaded files and images and
Last updated
Was this helpful?
This section covers how Bubble handles uploaded files and images and
Last updated
Was this helpful?
Bubble provides built-in tools for uploading and storing files and images, both within the editor and in your app.
File management can be a highly important aspect of your application, depending on your specific needs. Some apps require publicly accessible files, such as a photo-sharing platform or a marketplace displaying product images. Others need strict security measures to protect sensitive data, such as confidential documents, personal files, or employee records.
Many applications fall somewhere in between, managing a mix of public and private files. Some files may even change their visibility based on specific conditions—for example, a photo that only becomes visible if a privacy setting is marked as public = yes.
This article explores how to upload, display, download, and delete files in Bubble while ensuring proper security through privacy rules.
The Bubble database has two field types that support files: file and image.
Let's first look at how the mechanics of those features work:
The field in the database does not contain the actual file, but only a URL pointing to that file on another server. In other words, the file and image field types only contain a short string of text: the file's URL.
When you or one of your users upload a file using one of Bubble's built-in tools, it goes through the following steps:
The file is uploaded to a file storage server
That server returns a URL to reach that file
That URL can be saved to the database using a workflow
This logic comes with a few important points to note:
The size of your file (while important when the file is downloaded) does not affect the size of your database – it only contains the URL as text
When you delete the content of that field, you are only deleting the URL – not the file
Files are spread across Bubble's , ensuring a fast download
Files uploaded through the Bubble editor are not protected by . You should only upload files that are meant to be public.
Files can be uploaded directly in the Bubble editor in two ways:
By navigating to Data - File manager you can see and search for all files that have been uploaded. To upload a file, click the Upload button in the upper right corner, marked in red in the screenshot below:
When you edit a database thing that has a file or image field, you can upload a file directly to that field. The file will be uploaded and the URL will be linked to the database thing.
Deleting files in the Bubble editor is done by going to Data - File manager. Select the files you want to delete with the checkbox in the list, and then click the Delete button in the upper right corner. Keep in mind that Development and Live are separate.
Also note that if you edit a database thing in the database editor and remove the file from it by clicking the Clear link, this only removes the URL saved on that thing – it does not delete the file.
To allow users to upload files, you can choose between two Bubble-native elements:
File uploader
Image uploader
The elements both upload files and store their URLs in the database, but each offers a few key differences in their settings:
The image uploader
Offers a preview of the image
Accepts image formats
If an image is larger than 800 x 600 pixels, you can check a box to resize the image to these dimensions
The file uploader
Will show the filename and allow the user to download the file with a click
Accepts all file types
Lets you set a maximum file size in megabytes
If empty, both elements will open the standard operating system file selector.
After the file has been uploaded in one of the elements, it's value will return the URL of the image. You then need to use a workflow to save the URL in a field on the relevant data type.
Private files are linked to a specific database record and inherit the privacy rules associated with that data type. For example, if a user uploads a profile photo to their user record, the image file will be protected according to the privacy rules set for the User data type.
To ensure a file remains private, a few additional settings must be configured:
To set a file to be private, you need to first change some settings on the uploader element:
First, check the box Make this file private
A dynamic field will become visible where you can specify what database thing you want to attach the file to. In this example we have set the current user.
These two steps will ensure that the file is uploaded as a non-public file. We then need to check the Privacy Rules on the User data type to control who has access to it.
In the beginning of this article we covered that a file upload essentially consists of two parts: the file itself and its URL. This becomes useful and important when we set up the privacy rules.
There are two settings that affect the privacy of a file:
The field in which the file is saved (visible when View all fields is unchecked) This setting hides the field in which the URL is saved: in other words, a user without access will not be able to see the URL, but if they were to get the URL somewhere else (for example shared by another user who has access) they would be able to access the file through the URL.
View attached files This setting makes the file itself unavailable to all users who are not authorized to see it. Even if they had the URL, trying to view the file would result in an error message.
It's important to note that the first setting alone is not considered a secure way to store a file. Since it's publicly available, anyone could view it if they had the URL, which means the data is obfuscated but not secure.
Only by securing the second setting (view attached files) can you know for sure that no unauthorized users will be able to access it.
If you simply clear a file or image field in a data type, only the file’s URL is removed from the database—the file itself remains stored and accessible. To permanently delete the file, free up storage space, and ensure it is no longer available online, you need to configure a specific deletion action:
The Delete an uploaded file action removes a specified file using its URL. In the example above, this action is used to delete a user's profile picture by referencing the Current User's Profile Image, which is of type image.
To ensure the database no longer references the deleted file, you should also include a Make changes to a thing action. This step clears the file or image field, ensuring it returns an empty value after deletion.
