How to Set File Upload Size Limit in Supabase

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.SUPABASE_SERVICE_ROLE_KEY!
6)
7
8// Create a new bucket with a 5 MB limit
9const { data, error } = await supabase.storage.createBucket('avatars', {
10  public: true,
11  fileSizeLimit: 5242880, // 5 MB in bytes
12  allowedMimeTypes: ['image/png', 'image/jpeg', 'image/webp'],
13})
14
15// Update an existing bucket's size limit
16const { data: updated, error: updateError } = await supabase.storage.updateBucket('avatars', {
17  fileSizeLimit: 10485760, // 10 MB in bytes
18})

1const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5 MB
2
3function validateFileSize(file: File): { valid: boolean; message: string } {
4  if (file.size > MAX_FILE_SIZE) {
5    const sizeMB = (file.size / (1024 * 1024)).toFixed(1)
6    return {
7      valid: false,
8      message: `File is ${sizeMB} MB. Maximum allowed size is ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,
9    }
10  }
11  return { valid: true, message: '' }
12}
13
14async function uploadFile(file: File, bucket: string, path: string) {
15  const validation = validateFileSize(file)
16  if (!validation.valid) {
17    throw new Error(validation.message)
18  }
19
20  const { data, error } = await supabase.storage
21    .from(bucket)
22    .upload(path, file, {
23      cacheControl: '3600',
24      upsert: false,
25    })
26
27  if (error) throw error
28  return data
29}

1async function handleUpload(file: File) {
2  try {
3    const { data, error } = await supabase.storage
4      .from('documents')
5      .upload(`uploads/${file.name}`, file)
6
7    if (error) {
8      if (error.message.includes('Payload too large') || error.message.includes('413')) {
9        console.error('File exceeds the bucket size limit.')
10        // Show user-friendly message
11        return { success: false, message: 'This file is too large. Please upload a smaller file.' }
12      }
13      throw error
14    }
15
16    return { success: true, path: data.path }
17  } catch (err) {
18    console.error('Upload failed:', err)
19    return { success: false, message: 'Upload failed. Please try again.' }
20  }
21}

1-- Create buckets with different size limits using SQL
2insert into storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
3values
4  ('avatars', 'avatars', true, 2097152, '{image/png,image/jpeg,image/webp}'),
5  ('documents', 'documents', false, 20971520, '{application/pdf,text/plain}'),
6  ('videos', 'videos', false, 104857600, '{video/mp4,video/webm}');
7
8-- RLS policy: users can upload to their own folder
9create policy "Users upload to own folder" on storage.objects
10  for insert to authenticated
11  with check (
12    auth.uid()::text = (storage.foldername(name))[1]
13  );