> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/data/files.md). # 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. {% hint style="info" %} **A note on plugins:** Some plugins offer ways of uploading and managing files that differ from Bubble's built-in features and how they're described here. If you use a plugin to upload or manage files, we recommend getting to know the documentation for that plugin, along with any third parties it uses for file storage, conversion, or other external services. The instructions in this article for maintaining file privacy apply specifically to Bubble's native file management features. {% endhint %} ## How uploaded files are handled 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. ### What happens when a file is uploaded When you or one of your users uploads a file using one of Bubble's built-in tools, it goes through these steps: 1. The file is uploaded to a **file storage server**. 2. That server returns a **URL** to reach the file. 3. That **URL** can be saved to the database using a workflow. This has a few important consequences: * The size of your file doesn't affect the size of your database, since the database only holds the URL as text. (The size still matters when the file is downloaded.) * When you delete the contents of a file or image field, you're only deleting the URL, not the file itself. * Files are spread across Bubble's CDN\[^1], so they download quickly. ## Managing files in the Bubble editor ### Uploading files in the editor {% hint style="warning" %} Files uploaded through the Bubble editor aren't protected by privacy rules\[^2]. Only upload files that are meant to be **public**. {% endhint %} You can upload files directly in the editor in two ways. #### File manager 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 showing a list of uploaded files with their size, type, and upload date, and the Upload button highlighted in the top-right corner.

The file manager lists every uploaded file. Click Upload in the top-right corner to add a new one.

{% hint style="info" %} The file manager separates files uploaded in Development from those uploaded in Live. Use the link in the upper-right corner to switch between the two. {% endhint %} #### The database editor 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. ### Deleting files in the editor 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. {% hint style="warning" %} If you edit a database thing and remove a file from it with the *Clear* link, this only removes the URL saved on that thing. It does not delete the file. {% endhint %}

Removing an image with the Clear link doesn't delete the file, it only removes the URL from the database.

## Managing files in a web app ### Uploading files #### The upload elements 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.
Image uploaderFile uploader
AcceptsImage formatsAll file types
PreviewShows a preview of the imageShows the filename, which users can click to download
SizingCan resize images larger than 800 x 600 pixels to those dimensions, if you check the boxLets you set a maximum file size in megabytes
When empty, both elements open the standard operating system file selector. {% hint style="warning" %} As soon as a user uploads a file, it's sent to the file storage server and has a live URL that anyone with the link can view, even before you've saved that URL to the database. To keep files private, see using [privacy rules with files](#uploading-private-files-1) below. {% endhint %} #### Saving the URL in the database 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.
A workflow triggered by a cover image upload, with a Make changes to Post action that sets the post's cover_image field to the picture uploader's value.

After the file uploads, a Make changes to a thing action saves its URL to a field on the record. Here, the uploader's value is saved to the post's cover_image field.

### Uploading private files 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. {% stepper %} {% step %} #### Make the file private
The picture uploader's properties with the Make private toggle turned on and Attach this file to set to Current page's Post.

Turn on Make private in the picture uploader's properties.

On the uploader element, check the box *Make this file private*.
{% endstep %} {% step %} #### Attach it to a thing 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.
The picture uploader's properties with the Attach this file to field highlighted, set to Current page's Post.

In the Attach this file to field, choose the thing whose privacy rules should govern the file. Here it's set to Current page's Post.

{% endstep %} {% step %} #### Check the privacy rules 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.
Privacy rules on the Post data type. The Shared with rule has View files attached to this checked, while the Everyone else rule has it unchecked.

The View files attached to this permission is what controls access to the file itself. Here it's granted to shared users but withheld from everyone else.

{% endstep %} {% endstepper %} ## Deleting uploaded files 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. {% stepper %} {% step %} #### Delete the file Use the [**Delete an uploaded file**](/core-resources/actions/data-things.md#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. {% endstep %} {% step %} #### Clear the field Use a [**Make changes to a thing**](/core-resources/bubble-workflows/bubble-actions/database-actions.md#make-changes-to-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. {% endstep %} {% endstepper %} ## FAQ: Files
What's the difference between a file field and an image field? Both store the URL of an uploaded file, not the file itself. The *image* field is meant for image formats and pairs with the image uploader, which can show a preview and resize large images. The *file* field accepts any file type and pairs with the file uploader, which shows the filename and lets users download it.
If I clear a file field, is the file deleted? No. Clearing a file or image field only removes the URL saved on that thing. The file itself stays on the storage server and remains accessible to anyone with the link. To remove the file too, you need to delete it separately.
How do I permanently delete a file? Follow the steps described [here](#deleting-uploaded-files).
Why does the delete action have to come before clearing the field? The **Delete an uploaded file** action identifies the file by its URL. If you clear the field first, the URL is gone and the action has nothing to point to. Deleting the file first, then clearing the field, keeps the two in sync.
Are files I upload through the editor private? **No**. Files uploaded through the file manager or the database editor aren't protected by privacy rules. Only upload files there that are meant to be public.
How do I make a user-uploaded file private? Follow the steps described [here](#make-the-file-private).
Is turning on "Make private" enough to secure a file? No. That setting attaches the file to a thing, but the thing's privacy rules are what actually control access. Without setting *View files attached to this* on the data type, the file isn't secured.
What's the difference between hiding the URL field and "View files attached to this"? Hiding the field (by unchecking *View*) stops a user from seeing the URL, but if they obtained the URL another way, they could still open the file. *View files attached to this* protects the file itself, so even someone with the URL gets an error. Only the second setting makes a file truly secure. The first only obscures it.
Should I use the image uploader or the file uploader? Use the image uploader for images, since it previews the image and can resize ones larger than 800 x 600 pixels. Use the file uploader for any other file type, since it accepts all formats, shows the filename for download, and lets you set a maximum file size.
Can a file be accessed before I save its URL to the database? Yes. As soon as a user uploads a file, it's sent to the storage server and has a live URL that anyone with the link can view, even before you've saved that URL to the database. If the file needs to be private, make sure it's set up as a private upload.
## Other ways to learn
Video lessons * [How to use the file uploader element](https://youtu.be/2wQo0Nve4Zs) * [How to delete files attached to things](https://youtu.be/-z6b2UH_JAw)
Related articles * [The file and image uploader elements](/help-guides/design/elements/web-app/input-forms/file-uploads.md)