File upload elements let your users upload any kind of file to the Bubble server. Bubble has two different elements for uploading files: one for general file uploads and one specifically for images.
File storage and the database
File storage and the database
In the Bubble Data Type editor you can add two types of file upload fields:
file
image
When you upload a file to Bubble, the file itself isn’t stored in the database. The process happens in two steps: Bubble uploads the file to an AWS server, then saves the URL of that file in the database.
This means that file and image fields in your database hold only a short URL pointing to the file, not the file itself. From a performance standpoint, the database stays lightweight, and the file is only downloaded when it’s actually needed.
Deleting uploaded files
Deleting uploaded files
The database doesn’t hold files, only their URLs. Clearing the URL from a record doesn’t delete the file itself.
To delete the file from the server, use the Delete an uploaded file action in a workflow. Keep in mind you need the file’s URL to run this action, so delete the file before clearing the URL from the database.
Video tutorial: Deleting uploaded files
Uploaded files are public by default, meaning that anyone with the URL can access it. If you want your files to be securely private, you need to check the Make this file private on the uploader element and set up your privacy rules correctly. This applies both to images and other files.
You can read more about these settings in the core reference articles below:
Reference: Uploading files to be private
Reference: Protecting uploaded files with Privacy Rules
Video tutorial: Setting up Privacy Rules
File uploader
{% embed url=”https://www.youtube.com/watch?v=2wQo0Nve4Zs” %}
The File uploader element is used for uploading non-image files. It also supports uploading image file types, but the Image uploader element offers some additional features for that.
You can set a maximum size for the uploaded file. The File uploader element introduces a new action that lets you cancel an ongoing upload.
Picture uploader
{% embed url=”https://www.youtube.com/watch?v=ZXjhQkM5qV0” %}
The Image uploader element is used for uploading images and will give you a preview of the image after the upload. If you have set an image as its initial content it will also show that image, making it useful for images that are sometimes updated, like profile pics.
Multi-FileUploader (with drop area)
The Multi-FileUploader is similar to the regular file Uploader, but with two key differences:
It allows uploading multiple files
It allows you to set up a drop area where your users can drag-and-drop files
It allows you to set a maximum number of files to upload and an initial list of files to display upon page load.
The Multi-FileUploader element is a plugin. It’s made by Bubble but it needs to be installed in your app before you can use it.
Search for Multi-FileUploader in the plugin store to install it.