How to Build a File Manager in Bubble

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.

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.

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.

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.

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.