File upload input elements (web)

This section covers elements that lets your users upload files and images

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

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

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

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.

The File uploader element will show the filename after the user has selected a file to upload.

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

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.

The Image uploader element will show the image after it has been uploaded. In the example above we have styled the element to be circular.

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.