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.
Prerequisites
- 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
Add and configure the File Uploader element
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.
Create a Data Type field to store the file URL
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.
Save the uploaded file to the database
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.
Display uploaded files in a Repeating Group
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.
Add a download button for each file
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 working example
1FILE UPLOAD AND DISPLAY WORKFLOW SUMMARY2=========================================34DATA STRUCTURE:5 Data Type: Document (or your existing type)6 - title (text)7 - attachment (file)8 - uploaded_by (User)9 - Created Date (auto)1011UPLOAD PAGE ELEMENTS:12 - FileUploader A (file types: image/*, .pdf, .docx; max size: 10MB)13 - Input: TitleInput14 - Button: SubmitButton1516UPLOAD WORKFLOW (SubmitButton clicked):17 Action 1: Create a new Document18 → title = TitleInput's value19 → attachment = FileUploader A's value20 → uploaded_by = Current User21 Action 2: Reset inputs2223DISPLAY PAGE ELEMENTS:24 - RepeatingGroup (Type: Document, Source: Search for Documents)25 Cell contents:26 - Image: source = Current cell's Document's attachment27 Condition: visible when attachment contains "image"28 - Text: Current cell's Document's title29 - Link/Button: Download30 → Open external website: Current cell's Document's attachment3132PRIVACY RULES:33 - Document: everyone can find in searches34 - attachment field: visible based on your access rules35 - uploaded_by: only visible to owner and adminCommon mistakes when implementing file uploading and display in Bubble.io: Step-by-Step Guide
Why it's a problem: Forgetting to set allowed file types on the uploader
How to avoid: Always specify allowed file types in the File Uploader properties — e.g., image/*, .pdf, .docx
Why it's a problem: Using an image field for non-image files
How to avoid: Use the file field type if you need to accept any file type, or image if you only want images
Why it's a problem: Not setting a file size limit
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a Bubble.io app where users need to upload files (images and PDFs) and see them displayed in a list. Can you walk me through setting up the File Uploader element, saving files to the database, and displaying them in a Repeating Group?
Set up a file upload system for my app. Users should be able to upload images and PDFs, have them saved to the database, and see them displayed in a Repeating Group with previews and download buttons.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation