Files
This section covers how Bubble handles uploaded files and images and
Last updated
This section covers how Bubble handles uploaded files and images and
Last updated
Bubble comes with built-in tools both on the editor side and in your app to upload and store files and images.
This feature set can be an important part of your app that comes with different requirements. Some applications need to upload and load public files, such as a photo sharing website or a marketplace with product images. Others need files to be kept as secure as all other data: confidential documents, personal files or employee records for example.
Most applications are somewhere in between: they have some public files and some private files, and some files that change their status based on other criteria (such as a photo showing only if a field on the data type is set to public=yes).
In this article, we will look at how you can upload, display/download and delete files, as well as protecting them with Privacy Rules.
A note on plugins: Some plugins offer ways of uploading and managing files that may differ from Bubble's built-in features and how they are described here. If you use a plugin to upload and/or manage files, we recommend getting to to know the documentation for the plugin and any third-parties used for file storage, conversion and other external services. The instructions in this article for maintaining file privacy pertain specifically to Bubble's native file management features.
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 Privacy Rules. 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:
The file manager differs between files that were uploaded in Development and Live. Click the link in the upper right corner to switch between the two.
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.
When a file is uploaded by a user, it's immediately uploaded to the file storage server. This means that as soon as a file is uploaded, it technically has a live URL that can be viewed by anyone with the URL, even if you haven't saved the URL in the database yet.
To keep files private, see how to use Privacy Rules with files below.
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 bound to a database record and shares its Privacy Rules with that data type. For example, if a user uploads a profile photo to their user, that image file will be protected in accordance with the Privacy Rules set on the user data type.
A few additional settings are needed to keep a file private:
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 on a data type, you only remove the file's URL from the database. To delete the file to free up the space make sure it's no longer available online, you need to set up a specific action:
The Delete an uploaded file action deletes a file that you specify using its URL. In the example above we are deleting a user's profile picture by pointing the action towards the Current User's Profile image, which is of type image.
Not that you should include an additional step of Make changes to a thing and clear out the URL of the file from the file or image field afterwards, to ensure that it returns an empty value if the file has been deleted.
