# How to Build a File Manager in Bubble

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

## TL;DR

A file manager in Bubble uses a Folder Data Type supporting nested hierarchy and a File Data Type for uploaded documents. This tutorial covers building the folder tree with parent-child relationships, implementing file uploads with drag-and-drop, adding rename, move, and delete operations, displaying file type icons, and tracking storage usage per user.

## Overview: File Manager in Bubble

This tutorial shows you how to build a file management interface where users can organize files into folders, upload new files, and perform basic file operations like rename, move, and delete.

## Before you start

- A Bubble app on any plan
- Basic understanding of Data Types and File Uploads
- Familiarity with Repeating Groups and Workflows
- Understanding of parent-child data relationships

## Step-by-step guide

### 1. Design the file manager data model

Create two Data Types. 'Folder' with fields: name (text), parent_folder (Folder — self-referencing for nesting), owner (User), and path (text — for breadcrumb display like '/Documents/Projects'). 'UserFile' with fields: name (text), file (file), folder (Folder), owner (User), file_type (text — pdf, image, doc, etc.), and file_size (number — in bytes). The self-referencing parent_folder field enables nested folder hierarchies.

**Expected result:** Folder and UserFile Data Types support nested folder structures with file metadata.

### 2. Build the folder navigation sidebar

Create a two-panel layout: a sidebar showing the folder tree and a main area showing folder contents. In the sidebar, display root-level folders using a Repeating Group of Folders where parent_folder is empty and owner is Current User. Each folder row shows a folder icon, the folder name, and an expand arrow. When a folder is clicked, set a custom state 'current_folder' to the clicked folder. For sub-folders, add a nested Repeating Group inside each cell that searches for Folders where parent_folder equals the current cell's Folder. Add a breadcrumb trail above the main content showing the folder path.

**Expected result:** A sidebar displays navigable folders with expandable sub-folders and breadcrumb navigation.

### 3. Display folder contents and handle file uploads

In the main content area, add two Repeating Groups. First, show sub-folders of the current folder (Do a Search for Folder where parent_folder = current_folder). Second, show files (Do a Search for UserFile where folder = current_folder). Display each file with an appropriate icon based on file_type, the file name, size formatted as KB/MB, and the upload date. Add a File Uploader element and an Upload button. When Upload is clicked, create a new UserFile with the uploaded file, extract the file name and type from the file URL, and set the folder to current_folder.

> Pro tip: Parse the file extension from the uploaded file URL to automatically set the file_type field for icon display.

**Expected result:** The main panel shows folder contents and users can upload files to the current folder.

### 4. Implement file operations

Add right-click context menu or action buttons for each file and folder. For Rename: show an inline Input that replaces the name text, save on Enter or blur. For Move: open a popup with a folder tree selector, then Make changes to UserFile setting folder to the selected destination. For Delete: show a confirmation popup, then Delete the UserFile record. For Download: use the Open an external website action targeting the file's URL. For New Folder: show an Input popup, create a new Folder with parent_folder = current_folder.

**Expected result:** Users can rename, move, delete, and download files, and create new folders.

### 5. Track and display storage usage

Add a storage indicator at the top or bottom of the file manager. Calculate total storage used: Do a Search for UserFile where owner = Current User, then sum the file_size field. Display as 'X MB of Y MB used' with a progress bar. Set a storage limit per user based on their plan or a fixed value. Before file upload, check if the new file would exceed the limit and show a warning if so. For the progress bar, use a Group with dynamic width set to (used_storage / total_limit * 100) percent.

**Expected result:** Users see their current storage usage and remaining capacity with a visual progress bar.

## Complete code example

File: `Workflow summary`

```text
FILE MANAGER SYSTEM SUMMARY
=====================================

DATA MODEL:
  Folder: name, parent_folder (self-ref), owner, path
  UserFile: name, file, folder, owner, file_type,
    file_size

LAYOUT:
  Sidebar: Folder tree (nested RGs)
    Root: parent_folder is empty
    Children: parent_folder = current
  Main: Contents of current_folder
    Sub-folders RG + Files RG
  Breadcrumb: folder path display
  Storage bar: usage / limit

FILE OPERATIONS:
  Upload: File Uploader → Create UserFile
    Parse extension for file_type
    Set folder = current_folder
  Rename: Inline Input → Make changes
  Move: Folder picker popup → Change folder
  Delete: Confirm popup → Delete thing
  Download: Open external website (file URL)
  New Folder: Input popup → Create Folder
    parent_folder = current_folder

FILE TYPE ICONS:
  pdf → document icon (red)
  jpg/png → image icon (blue)
  doc/docx → word icon (blue)
  xls/xlsx → spreadsheet icon (green)
  other → generic file icon (gray)

STORAGE TRACKING:
  Total used: Search UserFiles → sum file_size
  Display: X MB of Y MB used
  Progress bar: width = used/limit %
  Upload check: reject if exceeds limit
```

## Common mistakes

- **Not implementing the folder hierarchy with self-referencing parent_folder** — Without parent_folder, you cannot create nested sub-folders and the file manager is limited to a flat structure Fix: Use a self-referencing Folder field (parent_folder of type Folder) to support unlimited nesting levels
- **Deleting a folder without deleting its contents** — Orphaned files and sub-folders remain in the database taking up space and causing data integrity issues Fix: Before deleting a folder, recursively delete all files and sub-folders inside it using a backend workflow
- **Not tracking file sizes on upload** — Without file size data, you cannot calculate storage usage or enforce limits Fix: Store the file size when creating the UserFile record and use it for storage calculations

## Best practices

- Use self-referencing Folder data type for flexible nesting
- Parse file extensions automatically to set type icons
- Track file sizes for storage monitoring and limits
- Implement confirmation dialogs for delete operations
- Show breadcrumb navigation for easy folder path context
- Recursively delete contents when deleting folders
- Set storage limits per user to manage app storage costs

## Frequently asked questions

### How much file storage does Bubble provide?

Storage varies by plan: Free gets 0.5GB, Starter 10GB, Growth 100GB, and Team 1TB. Files are stored on AWS S3.

### Can users share files or folders?

Yes. Add a 'shared_with' (list of Users) field to Folder and UserFile Data Types. Modify searches to include items shared with the Current User.

### Is there a maximum file size for uploads?

Bubble supports file uploads up to 50MB per file. For larger files, use an external storage service like AWS S3 directly.

### Can I preview files without downloading?

Images can be displayed directly using Image elements. PDFs can be previewed using an HTML element with an iframe pointing to the file URL. Other formats typically require downloading.

### How do I handle duplicate file names?

Before creating a UserFile, check if a file with the same name exists in the current folder. If so, append a number suffix like 'document (1).pdf'.

### Can RapidDev help build a file management system?

Yes. RapidDev can build advanced file managers in Bubble with sharing, permissions, version control, and integration with external storage services.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-file-manager-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-file-manager-in-bubble