Supabase Storage Giúp Lưu Trữ Media Dễ Dàng Cho Ứng Dụng Của Bạn

npm install @supabase/supabase-js

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseAnonKey = 'your-anon-public-key'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

-- Cho phép user upload file vào bucket của họ
CREATE POLICY "Users can upload own files" ON storage.objects
FOR INSERT WITH CHECK (
  bucket_id = 'avatars' AND
  auth.uid()::text = user_id
);

-- Cho phép user xem file của chính họ
CREATE POLICY "Users can view own files" ON storage.objects
FOR SELECT USING (
  bucket_id = 'avatars' AND
  (user_id = auth.uid()::text OR user_id IS NULL)
);

Bước 4: Upload file từ client

Để upload file, bạn sử dụng hàm upload của Supabase Storage. Ví dụ, upload avatar cho user:

async function uploadAvatar(userId, file) {
  const filePath = ${userId}/${file.name}
  const { data, error } = await supabase
    .storage
    .from('avatars')
    .upload(filePath, file, {
      upsert: false,
      contentType: file.type,
      metadata: { userId }
    })

if (error) {
    console.error('Upload failed:', error)
    return null
  }

return data
}

Bước 5: Lấy URL và hiển thị file

Sau khi upload, bạn có thể lấy URL của file và hiển thị trong ứng dụng:

async function getAvatarUrl(userId) {
  const { data, error } = await supabase
    .storage
    .from('avatars')
    .getPublicUrl(${userId}/avatar.png)

if (error) {
    console.error('Get URL failed:', error)
    return null
  }

return data.publicURL
}

Bước 6: Xóa file khi cần

Để xóa file, sử dụng hàm remove:

async function deleteAvatar(userId, fileName) {
  const { error } = await supabase
    .storage
    .from('avatars')
    .remove([${userId}/${fileName}])

if (error) {
    console.error('Delete failed:', error)
    return false
  }

return true
}

Lưu ý và best practices

– Quản lý quyền cẩn thận: Luôn thiết lập RLS để tránh việc user truy cập file của nhau.
– Sử dụng metadata: Lưu thông tin bổ sung (như user ID, loại file) vào metadata để dễ dàng quản lý và tìm kiếm.
– Tối ưu kích thước file: Nén hình ảnh trước khi upload để tiết kiệm dung lượng và tăng tốc độ tải.
– Backup định kỳ: Dù Supabase có độ tin cậy cao, bạn nên có kế hoạch backup dữ liệu quan trọng.

Kết luận

Supabase Storage cung cấp một giải pháp toàn diện, dễ sử dụng cho việc lưu trữ và quản lý file media trong ứng dụng. Với khả năng tích hợp sẵn với Auth và Database, cùng với bảo mật mạnh mẽ và hỗ trợ CDN, đây là lựa chọn đáng cân nhắc cho các dự án từ nhỏ đến lớn. Bằng cách làm theo hướng dẫn trên, bạn có thể nhanh chóng triển khai tính năng upload và quản lý file, giúp ứng dụng của mình trở nên chuyên nghiệp và thân thiện hơn với người dùng.