# How to implement file uploading and display in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Bubble's File Uploader element lets users upload files that are stored as URLs in your database. This tutorial covers the end-to-end pipeline from configuring the uploader element and saving file URLs to displaying uploaded files in a Repeating Group with download links and image previews.

## Overview: Uploading and Displaying Files in Bubble

File handling is essential for most apps — whether users need to upload profile pictures, documents, or media. Bubble provides a built-in File Uploader element that handles the upload process and returns a URL you can store in your database. This tutorial walks you through the complete pipeline: configuring the uploader, saving references, and displaying files back to users with previews and download options.

## Before you start

- A Bubble app with at least one page
- A Data Type to attach files to (e.g., Post, Project, or User)
- Basic understanding of Bubble elements and workflows

## Step-by-step guide

### 1. Add and configure the File Uploader element

Go to the Design tab and open the page where you want file uploads. Click the + icon in the element palette and search for File Uploader. Drag it onto your page. In the Property Editor on the right, configure these settings: set the allowed file types (e.g., image/*, application/pdf, .docx), set the maximum file size, and customize the placeholder text. The File Uploader shows a clickable area where users can browse for files.

> Pro tip: Use the Dynamic image option on the File Uploader to show a preview of the selected image before the user submits the form.

**Expected result:** A File Uploader element appears on your page that lets users select files from their device.

### 2. Create a Data Type field to store the file URL

Go to the Data tab and select the Data Type where you want to store files. Click Create a new field. Name it something descriptive like attachment or document. Set the field type to file (for any file type) or image (for images only). If you need multiple files per record, check the This field is a list checkbox to allow storing multiple file URLs.

**Expected result:** Your Data Type has a new file or image field ready to store uploaded file URLs.

### 3. Save the uploaded file to the database

Add a Submit or Save button below the File Uploader. In its workflow, add the action Data → Create a new thing (or Make Changes to a Thing if updating an existing record). Set the file field to FileUploader A's value. This stores the URL of the uploaded file in your database. If using a list field for multiple uploads, use the add item operator to append each new file.

**Expected result:** When the user clicks Submit, the uploaded file's URL is saved to the database record.

### 4. Display uploaded files in a Repeating Group

Add a Repeating Group to the page where you want to show files. Set its Type of content to your Data Type and its Data source to Do a Search for with appropriate constraints. Inside the Repeating Group cell, add an Image element and set its source to Current cell's Data Type's file field. For non-image files, add a Text element showing the filename and a Link element with the file URL as the destination to enable downloads.

> Pro tip: Use conditions on the Image element: make it visible only when the file is an image type. Show a file icon placeholder for PDFs and documents.

**Expected result:** Uploaded files appear in a list with image previews for photos and download links for documents.

### 5. Add a download button for each file

Inside the Repeating Group cell, add a Button or Link element labeled Download. In its workflow, add the action Navigation → Open an external website. Set the URL to Current cell's Data Type's file field. Check the Open in a new tab option. For forcing a download instead of opening in the browser, append :saved to clipboard is not available natively — instead consider using the Toolbox plugin's Run JavaScript action to trigger a programmatic download.

**Expected result:** Users can click a download button next to each file to open or save it.

## Complete code example

File: `Workflow summary`

```text
FILE UPLOAD AND DISPLAY WORKFLOW SUMMARY
=========================================

DATA STRUCTURE:
  Data Type: Document (or your existing type)
    - title (text)
    - attachment (file)
    - uploaded_by (User)
    - Created Date (auto)

UPLOAD PAGE ELEMENTS:
  - FileUploader A (file types: image/*, .pdf, .docx; max size: 10MB)
  - Input: TitleInput
  - Button: SubmitButton

UPLOAD WORKFLOW (SubmitButton clicked):
  Action 1: Create a new Document
    → title = TitleInput's value
    → attachment = FileUploader A's value
    → uploaded_by = Current User
  Action 2: Reset inputs

DISPLAY PAGE ELEMENTS:
  - RepeatingGroup (Type: Document, Source: Search for Documents)
    Cell contents:
      - Image: source = Current cell's Document's attachment
        Condition: visible when attachment contains "image"
      - Text: Current cell's Document's title
      - Link/Button: Download
        → Open external website: Current cell's Document's attachment

PRIVACY RULES:
  - Document: everyone can find in searches
  - attachment field: visible based on your access rules
  - uploaded_by: only visible to owner and admin
```

## Common mistakes

- **Forgetting to set allowed file types on the uploader** — Without restrictions, users can upload any file type including executables, which is a security risk and wastes storage Fix: Always specify allowed file types in the File Uploader properties — e.g., image/*, .pdf, .docx
- **Using an image field for non-image files** — The image field type only accepts image files and will reject PDFs, documents, and other file types Fix: Use the file field type if you need to accept any file type, or image if you only want images
- **Not setting a file size limit** — Large uploads consume storage quickly and can slow down your app, especially on lower-tier plans with limited storage Fix: Set a reasonable max file size in the File Uploader properties — 5-10MB is typical for documents, 2-5MB for images

## Best practices

- Always set file type restrictions and size limits on the File Uploader element
- Use the image field type for photos and the file field type for documents and mixed content
- Show upload progress or a loading indicator while the file is being processed
- Compress images before upload using a plugin or by setting image quality in the Imgix parameters
- Add Privacy Rules to file fields to prevent unauthorized access to sensitive documents
- Use descriptive filenames or titles alongside the file URL for better user experience
- Test uploads with various file types and sizes before deploying to live

## Frequently asked questions

### What file types does Bubble support for upload?

Bubble supports any file type. You control which types are allowed using the File Uploader's file type restriction setting. Common types include images (image/*), PDFs (application/pdf), and documents (.docx, .xlsx).

### Where are uploaded files stored?

Bubble stores uploaded files on its own servers (backed by AWS S3). The file URL is saved in your database and can be accessed via that URL. Files count toward your plan's storage limit.

### What is the maximum file size I can upload?

Bubble allows uploads up to 50MB per file on paid plans. The Free plan has a lower limit. You can set a custom maximum in the File Uploader element properties.

### Can users upload multiple files at once?

Yes. The File Uploader element has a multiple files option. When enabled, it returns a list of file URLs. Store them in a list field on your Data Type.

### How do I show a preview of uploaded images?

Add an Image element and set its source to the File Uploader's value. The preview updates automatically when the user selects a new file, even before saving to the database.

### Can I restrict uploads to certain users?

Yes. Use workflow conditions (Only when Current User's role is X) to control who can trigger the upload workflow. For existing files, use Privacy Rules to control who can view or download them. RapidDev can help design role-based file access systems for complex permission needs.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/implement-file-uploading-and-display-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/implement-file-uploading-and-display-in-bubble