Bubble's File Uploader element needs careful configuration to handle file types, size limits, and validation before saving. This tutorial covers restricting accepted file types, setting size limits, enabling multi-file uploads, showing progress indicators, and validating files before they hit your database.
Overview: Configuring the File Uploader in Bubble
The File Uploader element is Bubble's built-in component for accepting user file uploads. While it works out of the box, you need to configure it properly to avoid security risks, storage bloat, and poor user experience. This tutorial focuses specifically on uploader configuration — file type restrictions, size limits, multi-file support, and pre-save validation.
Prerequisites
- A Bubble app with a page where users need to upload files
- A Data Type with a file or image field to store uploads
- Basic familiarity with Bubble elements and the Property Editor
Step-by-step guide
Add the File Uploader and set file type restrictions
Add the File Uploader and set file type restrictions
In the Design tab, click the + icon in the element palette and search for File Uploader. Drag it onto your page. In the Property Editor on the right, find the file type restriction field. Enter the MIME types or extensions you want to allow, separated by commas. For images only: image/png, image/jpeg, image/gif. For documents: application/pdf, .docx, .xlsx. For mixed: image/*, application/pdf. Leave blank to accept all types, though this is not recommended.
Pro tip: Use image/* as a shorthand to accept all image formats including PNG, JPEG, GIF, WebP, and SVG.
Expected result: The File Uploader only accepts files matching your specified types and shows an error for other formats.
Set a maximum file size
Set a maximum file size
In the File Uploader's Property Editor, find the max file size setting. Enter the limit in kilobytes — for example, 5120 for 5MB or 10240 for 10MB. Bubble will reject files exceeding this size and display an error message to the user. Choose a size appropriate for your use case: 2-5MB for images, 10MB for documents, up to 50MB for large files on paid plans.
Expected result: Files exceeding the size limit are rejected with an error message, preventing oversized uploads.
Enable multi-file uploads
Enable multi-file uploads
If users need to upload multiple files at once, check the Allow multiple files option in the File Uploader's Property Editor. When enabled, users can select multiple files from the file picker dialog. The uploader's value becomes a list of file URLs instead of a single URL. Store these in a list field on your Data Type — go to the Data tab, select your type, and ensure the file field has This field is a list checked.
Pro tip: Show the count of selected files with dynamic text: FileUploader A's value's count followed by files selected.
Expected result: Users can select and upload multiple files in a single operation, stored as a list in the database.
Add upload validation before saving
Add upload validation before saving
On your Submit button's workflow, add an Only When condition to validate the upload. Common checks: FileUploader A's value is not empty (ensure a file was selected), and optionally check the filename extension if you need stricter validation. You can use conditional formatting on the button to gray it out when no file is selected, providing visual feedback.
Expected result: The form cannot be submitted without a valid file upload, preventing empty or invalid records.
Show an upload progress indicator
Show an upload progress indicator
Add a Text element or a Shape element near the File Uploader. Add a conditional on this element: When FileUploader A is loading (or a similar state depending on your Bubble version), change the text to Uploading... or make a progress bar visible. You can also use the FileUploader A's percent uploaded value to show a percentage. Hide the indicator when loading completes using another conditional.
Expected result: Users see a loading or progress indicator while their file is being uploaded.
Complete working example
1FILE UPLOADER CONFIGURATION SUMMARY2=====================================34ELEMENT: File Uploader A5 Properties:6 - File type restriction: image/png, image/jpeg, application/pdf7 - Max file size: 5120 KB (5MB)8 - Allow multiple files: yes (if needed)9 - Placeholder text: "Click to upload or drag files here"1011DATA TYPE: Document12 Fields:13 - title (text)14 - attachments (file, list: yes) ← list if multi-upload15 - uploaded_by (User)1617VALIDATION WORKFLOW:18 Button: SubmitButton19 Condition: Only when FileUploader A's value is not empty20 Action 1: Create a new Document21 → title = TitleInput's value22 → attachments = FileUploader A's value23 → uploaded_by = Current User24 Action 2: Reset relevant inputs2526CONDITIONAL FORMATTING:27 SubmitButton:28 When FileUploader A's value is empty:29 → Background color: gray30 → This element isn't clickable: yes3132 UploadingText:33 When FileUploader A is loading:34 → This element is visible: yes35 → Text: "Uploading... [FileUploader A's percent uploaded]%"36 Default: not visible on page load3738FILE TYPE REFERENCE:39 Images: image/* or image/png, image/jpeg, image/gif40 PDFs: application/pdf41 Word docs: .docx, application/vnd.openxmlformats-officedocument.wordprocessingml.document42 Excel: .xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet43 Any file: leave restriction blank (not recommended)Common mistakes when building file uploads in Bubble
Why it's a problem: Leaving file type restrictions blank
How to avoid: Always specify the file types you actually need — image/*, application/pdf, etc.
Why it's a problem: Using a single file field for multi-file uploads
How to avoid: Check the This field is a list option on your Data Type field when using the multi-file uploader
Why it's a problem: Not showing upload feedback to users
How to avoid: Add a progress indicator and disable the Submit button while the File Uploader is loading
Best practices
- Always restrict file types to only what your app needs
- Set a reasonable max file size based on your storage plan and use case
- Disable the Submit button while files are uploading to prevent premature submission
- Show upload progress with a percentage or loading indicator
- Use list fields for multi-file uploads and non-list fields for single uploads
- Add an option for users to remove a selected file before submitting
- Test with files at and above your size limit to verify error handling works
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to configure a file uploader in my Bubble.io app that accepts only images and PDFs under 5MB, allows multiple files, and shows upload progress. Can you walk me through the exact element properties and workflow settings?
Configure the file uploader on my page to accept only images and PDFs, limit file size to 5MB, allow multiple files, and show a progress indicator during upload.
Frequently asked questions
What is the maximum file size Bubble supports?
Bubble supports file uploads up to 50MB per file on paid plans. The Free plan has a lower limit. You can set a custom maximum that is lower than Bubble's limit in the File Uploader properties.
Can I accept files by drag and drop?
Yes. The File Uploader element supports drag and drop by default. Users can either click to browse or drag files directly onto the uploader area.
How do I delete an uploaded file?
Clear the file field on the database record using Make Changes to Thing and setting the field to empty. The physical file remains in your File Manager until you manually delete it there.
Do uploads count toward my storage limit?
Yes. Every uploaded file counts toward your plan's storage limit (0.5GB on Free, 10GB on Starter, 100GB on Growth). Monitor your usage in Settings.
Can I compress images automatically on upload?
Bubble added automatic image compression in February 2026, reducing image sizes by roughly 60%. For additional control, use a plugin or the API Connector with an image optimization service like TinyPNG. RapidDev can help set up automated image processing pipelines.
How do I show a thumbnail preview before the file is saved?
Add an Image element and set its source to FileUploader A's value. For images, this shows a preview immediately after selection. For non-image files, display a file type icon instead.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation