# #FlutterFlow File Upload to #Supabase Storage Bucket - Walkthrough

Source: https://www.youtube.com/watch?v=ABrR-cuBC9A
Recap page: https://rapidrecap.app/video/ABrR-cuBC9A
Generated: 2025-11-19T19:36:27.71+00:00

---
## Quick Overview

The video demonstrates how to implement a FlutterFlow application that uploads PDF files to a Supabase Storage Bucket, stores the file path in a PostgreSQL table using a user ID filter, and then renders the PDF using a PDF Viewer widget, all while ensuring Row Level Security (RLS) policies restrict access to authenticated users only within their respective folders.

**Key Points:**
- The application successfully uploads a PDF file to a private folder within a Supabase Storage Bucket named 'uploads' via an action flow.
- The backend call action ensures that only the authenticated user's ID is stored in the database along with the file's path.
- The database query for the list view is filtered by 'user_id' equal to the 'Authenticated User -> User ID' to display only the current user's uploaded files.
- The order of records in the list view is set to be based on 'created_at' in descending order, showing the newest uploads first.
- The PDF Viewer widget is configured to use a Network Path source, dynamically pointing to the stored file path from the database query result.
- RLS policies are implemented on the 'uploads' table, specifically granting authenticated users access (SELECT, INSERT, UPDATE, DELETE) only to files within folders named after their user ID, ensuring data isolation.

![Screenshot at 00:28: Clicking the 'Upload File' button initiates the process, leading to the device's file selection interface where a 'sample' PDF file is chosen for upload.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-00-28.png)

**Context:** This tutorial walks through setting up a file upload feature in a FlutterFlow application that integrates with Supabase for both file storage and database management. The core requirement is securely uploading PDF files, storing metadata (like the path and user ID) in the database, and then displaying the PDF content within the app using a PDF Viewer widget, all while maintaining user-specific data segregation using Supabase Row Level Security (RLS).

## Detailed Analysis

The tutorial details the construction of a file upload system using FlutterFlow and Supabase. The initial step involves setting up the UI on the mobile simulator (iPhone 14 Pro) with a button to trigger the file selection. Upon selecting a PDF file, an action flow is triggered when the 'Upload File' button is pressed. This flow first invokes the 'Upload file to Supabase' action, specifying the 'uploads' bucket and the 'private' folder path, which is dynamically constructed using the authenticated user's ID in the policy definition (02:54). A conditional check ensures that the upload was successful (i.e., the 'Uploaded File URL' is not empty) before proceeding (11:25). If successful (TRUE path), a Backend Call (Insert Row) action inserts a new record into the 'upload' table, saving the authenticated user's ID and the file's path (12:17). This is followed by a 'Refresh Database Request' to update the list view (12:56). The list view component ('PageScrollableColumn') is configured to query the 'upload' table, filtered by 'user_id' matching the current authenticated user's ID, and ordered by 'created_at' descending (07:34). Finally, the PDF Viewer widget is configured to load the PDF from the 'path' field returned by the database query (13:24). The video emphasizes the importance of Supabase RLS policies, which dictate that authenticated users only have permissions to access files within folders named after their user ID within the 'private' folder of the 'uploads' bucket (05:05).

### File Upload Action Flow

- Invokes 'Upload file to Supabase' in 'uploads' bucket/private folder
- Checks if 'Uploaded File URL' is set/non-empty before proceeding
- If true, inserts row into 'upload' table via Backend Call
- Refreshes the database query on the list view component.

### Database Query Configuration

- PageScrollableColumn widget queries the 'upload' table
- Filter set on 'user_id' equal to 'Authenticated User -> User ID'
- Ordering set by 'created_at' descending to show latest files first.

### Supabase Storage Security (RLS)

- Policies set on the 'uploads' bucket ensure authenticated users only access folders named after their user ID (e.g., '/private/{user_id}/...').

### PDF Viewer Configuration

- PDFViewer widget's Network Path source dynamically pulls the file path from the 'path' field returned by the database query (uploadRow -> path) (13:25).

### Backend Database Insertion

- Backend Call action inserts a new row into the 'upload' table, mapping 'user_id' to 'Authenticated User -> User ID' and 'path' to 'Uploaded File URL' (12:20).

![Screenshot at 00:05: Initial screen of the FlutterFlow application showing the 'Supabase File Upload' title and the 'Upload File' button.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-00-05.png)
![Screenshot at 00:28: The file picker interface opens on the simulator after tapping 'Upload File', displaying a local file named 'sample' \(19 KB\).](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-00-28.png)
![Screenshot at 00:44: The application displays a loading indicator in the PDF viewer area after the file upload process begins.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-00-44.png)
![Screenshot at 00:51: The uploaded PDF content is successfully rendered within the custom PDF Viewer widget in the application UI.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-00-51.png)
![Screenshot at 02:33: The Supabase Table Editor view shows the 'upload' table with two entries, including 'created\_at', 'user\_id', and the 'path' URL.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-02-33.png)
![Screenshot at 05:01: Navigating to the Storage section in the Supabase dashboard to view existing storage policies for the 'uploads' bucket.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-05-01.png)
![Screenshot at 05:41: The 'Adding new policy to uploads' modal is open, with the template 'Give users access to a folder only to authenticated users' selected.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-05-41.png)
![Screenshot at 07:28: Editing the Supabase Query in the PageScrollableColumn widget's properties panel, showing the filter applied on 'user\_id' matching the current user.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-07-28.png)
![Screenshot at 09:31: The Action Flow Editor displays the sequence of actions triggered by the upload button, including invoking Supabase, checking for a file URL, inserting into the database, and refreshing the list.](https://ss.rapidrecap.app/screens/ABrR-cuBC9A/00-09-31.png)