Storage

​

What is Storage

• Fast global delivery - Files are served through a CDN, so they load quickly worldwide
• Flexible access control - Make files public for everyone or private for specific users
• Organized structure - Group files into “buckets” for different purposes
• Upload restrictions - Set file size limits and allowed file types per bucket

​

Understanding Buckets

​

Public vs Private Buckets

• Anyone with the URL can view the files
• Good for: profile pictures, product images, public assets
• Files have permanent, shareable URLs

• Only authorized users can access files
• Good for: personal documents, invoices, sensitive data
• Files require special “signed URLs” with expiration times

​

Using Storage with OptiDev Agent

​

Example: Profile Pictures

“Add profile picture upload to my user settings page and display them next to usernames”

1. Create a storage bucket for avatars
2. Add an upload component to your settings page
3. Save the image URL to the user’s profile
4. Display the picture throughout your app

​

Example: Document Uploads

“Let users upload PDF documents to their account with a download button for each file”

1. Set up a private storage bucket for documents
2. Create an upload interface
3. Build a file list with download buttons
4. Set up access policies so users only see their own files

​

Example: Public Gallery

“Create a public image gallery where anyone can see the images but only authenticated users can upload”

1. Create a public storage bucket for the gallery
2. Add an image upload component for logged-in users
3. Display a gallery view visible to everyone
4. Set up policies for public read and authenticated upload

​

Managing Buckets in the Dashboard

​

Viewing Your Buckets

1. Go to the Storage tab in OptiDev Cloud
2. You’ll see a grid of bucket cards
3. Each card shows the bucket name and a Public or Private badge

​

Creating a New Bucket

1. Click the New bucket button
2. Enter a bucket name (this cannot be changed later)
3. Choose visibility:
   • Public - Anyone can view files
   • Private - Only authorized users can access
4. Optionally set restrictions (see Bucket Settings below)
5. Click Create bucket

​

Bucket Settings

• Toggle on to restrict maximum file size
• Enter the limit in megabytes (MB)
• Uploads exceeding this size will be rejected
• Default is 50 MB if not set

• Toggle on to restrict which file types can be uploaded
• Enter MIME types separated by commas
• Examples: image/png, image/jpeg or application/pdf

​

Emptying or Deleting a Bucket

1. Click the bucket you want to modify
2. Click the Edit bucket dropdown
3. Select Empty bucket to delete all files but keep the bucket, or Delete bucket to remove everything
4. Confirm the action

​

Browsing Files in the Dashboard

• Breadcrumb navigation - Shows your current location (e.g., avatars / users / profile-pics)
• File table - Lists all files and folders with Name, Size, and Modified date
• Folder navigation - Click any folder to enter it
• Back button - Return to the bucket list

​

Uploading Files

1. Click a bucket to open it
2. Navigate to the folder where you want to upload (or stay at root)
3. Click the Upload button
4. Select files from your computer
5. Files upload directly to storage

​

Deleting Files

1. Find the file you want to delete
2. Click the trash icon next to the file
3. Confirm the deletion

​

Viewing Storage Policies

​

Viewing Policies

1. Click a bucket to open it
2. Click the Policies button
3. A modal shows all security rules for this bucket

​

Understanding Policies

• Policy name - Descriptive name for the rule
• Command - What action it controls (SELECT, INSERT, DELETE, etc.)
• Applies to - Who the rule affects:
  • public - Anyone, including users who are not logged in
  • authenticated - Only users who are logged in
  • Other custom roles as defined in your app
• Definition - The actual security condition

​

Modifying Policies

“Only let authenticated users upload files to the documents bucket”

“Users should only be able to see and delete their own files”

“Make the avatars bucket publicly readable but only allow uploads from logged-in users”

​

Storage Limits and Quotas

• Files are stored securely with automatic backups
• Large files are handled efficiently
• No per-file charges for standard usage

​

For Developers

const { data, error } = await supabase.storage
  .from('avatars')
  .upload('user-123.jpg', file)

const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl('user-123.jpg')

// data.publicUrl contains the URL

const { data, error } = await supabase.storage
  .from('documents')
  .createSignedUrl('invoice.pdf', 3600) // expires in 1 hour

// data.signedUrl contains the temporary URL

const { data, error } = await supabase.storage
  .from('documents')
  .list('user-123/') // list files in a folder

const { error } = await supabase.storage
  .from('avatars')
  .remove(['user-123.jpg'])

{
  name: 'documents',
  public: false,
  fileSizeLimit: 10485760,        // 10MB in bytes
  allowedMimeTypes: ['application/pdf', 'image/png', 'image/jpeg']
}

CREATE POLICY "Public read" ON storage.objects
  FOR SELECT USING (bucket_id = 'avatars');

CREATE POLICY "Auth upload" ON storage.objects
  FOR INSERT WITH CHECK (
    bucket_id = 'documents'
    AND auth.role() = 'authenticated'
  );

CREATE POLICY "User files" ON storage.objects
  FOR ALL USING (
    bucket_id = 'documents'
    AND auth.uid()::text = (storage.foldername(name))[1]
  );