Cách Tích Hợp Supabase Storage Quản Lý File Upload Trong Web App

Mở đầu

Trong các ứng dụng web hiện đại, khả năng cho phép người dùng upload và quản lý file là một tính năng gần như không thể thiếu. Tuy nhiên, việc tự xây dựng một hệ thống lưu trữ file hoàn chỉnh từ đầu thường đòi hỏi nhiều công sức và nguồn lực. Supabase Storage ra đời như một giải pháp đơn giản, hiệu quả, giúp các nhà phát triển dễ dàng tích hợp tính năng quản lý file vào dự án của mình. Trong bài viết này, chúng ta sẽ cùng khám phá cách tận dụng Supabase Storage để xử lý file upload một cách chuyên nghiệp và an toàn.

Supabase Storage là gì?

Supabase Storage là một dịch vụ lưu trữ file được tích hợp sẵn trong hệ sinh thái Supabase. Nó cho phép bạn upload, lưu trữ, và phân phối file một cách nhanh chóng, đồng thời đảm bảo tính bảo mật thông qua hệ thống quyền hạn (ACL) linh hoạt. Với Supabase Storage, bạn không cần phải lo lắng về việc quản lý server hay cơ sở dữ liệu cho file, vì mọi thứ đã được tối ưu hóa sẵn.

Một trong những điểm mạnh của Supabase Storage là khả năng tích hợp mượt mà với Supabase Auth, giúp bạn dễ dàng kiểm soát ai có quyền truy cập vào file nào. Ngoài ra, nó còn hỗ trợ upload trực tiếp từ trình duyệt, giúp giảm tải cho server backend và cải thiện trải nghiệm người dùng.

Các khái niệm cơ bản trong Supabase Storage

Để làm việc hiệu quả với Supabase Storage, bạn cần nắm rõ một số khái niệm cơ bản sau:

- Bucket: Là một thư mục lưu trữ file, tương tự như thư mục trên ổ đĩa. Mỗi bucket có thể chứa nhiều file và folder con. - Folder: Là đơn vị tổ chức file bên trong bucket, giúp bạn phân loại và quản lý file một cách khoa học. - Access Control List (ACL): Là hệ thống quyền hạn, cho phép bạn xác định ai có thể đọc, ghi, hoặc xóa file trong bucket. - Presigned URL: Là đường dẫn tạm thời được tạo ra để upload hoặc download file trực tiếp từ trình duyệt, giúp tăng tính bảo mật và hiệu năng.

Hướng dẫn tích hợp Supabase Storage

Bước 1: Khởi tạo dự án và cài đặt Supabase

Đầu tiên, bạn cần tạo một dự án mới trên Supabase. Sau khi đăng nhập vào dashboard, chọn "New Project", đặt tên và cấu hình database. Khi dự án được tạo xong, bạn sẽ nhận được URL và khóa truy cập (anon key, service role key).

Tiếp theo, cài đặt thư viện Supabase vào ứng dụng web của bạn:

npm install @supabase/supabase-js

Bước 2: Tạo bucket và cấu hình quyền hạn

Trong dashboard Supabase, chuyển đến tab "Storage", sau đó tạo một bucket mới. Bạn có thể đặt tên bucket tùy ý, ví dụ: public-files hoặc user-uploads.

Sau khi tạo bucket, bạn cần thiết lập quyền hạn (ACL) để kiểm soát ai có thể truy cập vào file. Ví dụ, bạn có thể cho phép mọi người đọc file nhưng chỉ người dùng đã đăng nhập mới có quyền upload.

Bước 3: Upload file từ frontend

Để upload file từ trình duyệt, bạn cần sử dụng hàm getUploadUrl để lấy URL tạm thời, sau đó upload file trực tiếp lên Supabase Storage:

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

const supabase = createClient('https://your-project.supabase.co', 'your-anon-key');


async function uploadFile(file) {
  const fileName = file.name;
  const folder = 'uploads/';


// Lấy URL upload tạm thời
  const { data, error } = await supabase.storage
    .from('public-files')
    .getUploadUrl(fileName, folder);


if (error) {
    console.error('Lỗi khi lấy URL upload:', error);
    return;
  }
Quảng cáo
300x250 In-Content Advertisement


const uploadUrl = data.upload_url;
  const uploadPath = data.upload_path;


// Upload file trực tiếp
  const formData = new FormData();
  formData.append('file', file);


const uploadResponse = await fetch(uploadUrl, {
    method: 'PUT',
    body: formData.get('file'),
    headers: {
      'Content-Type': file.type,
    },
  });


if (uploadResponse.ok) {
    console.log('Upload thành công:', uploadPath);
  } else {
    console.error('Lỗi khi upload file');
  }
}

Bước 4: Xóa và quản lý file

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

async function deleteFile(filePath) {
  const { error } = await supabase.storage
    .from('public-files')
    .remove([filePath]);

if (error) {
    console.error('Lỗi khi xóa file:', error);
  } else {
    console.log('Xóa file thành công');
  }
}

Bạn cũng có thể liệt kê danh sách file trong bucket để hiển thị cho người dùng:

async function listFiles() {
  const { data, error } = await supabase.storage
    .from('public-files')
    .list();

if (error) {
    console.error('Lỗi khi lấy danh sách file:', error);
  } else {
    console.log('Danh sách file:', data);
  }
}

Một số lưu ý khi sử dụng Supabase Storage

Khi làm việc với Supabase Storage, bạn nên lưu ý một số điểm sau:

- Bảo mật: Luôn sử dụng getUploadUrl để lấy URL tạm thời thay vì hardcode URL bucket. Điều này giúp ngăn chặn truy cập trái phép. - Quyền hạn: Cấu hình ACL cẩn thận để đảm bảo chỉ những người dùng được phép mới có thể upload hoặc xóa file. - Giới hạn kích thước file: Nếu ứng dụng của bạn cho phép upload file lớn, hãy cân nhắc giới hạn kích thước file ở frontend và backend. - Tối ưu hiệu năng: Sử dụng CDN của Supabase để phân phối file nhanh hơn đến người dùng cuối.

Kết luận

Supabase Storage cung cấp một giải pháp mạnh mẽ và dễ sử dụng cho việc quản lý file upload trong ứng dụng web. Với các tính năng bảo mật tích hợp, hệ thống quyền hạn linh hoạt, và khả năng tích hợp mượt mà với Supabase Auth, nó giúp các nhà phát triển tiết kiệm thời gian và công sức đáng kể. Hy vọng qua bài viết này, bạn đã nắm được các kiến thức cơ bản và có thể tự tin áp dụng Supabase Storage vào dự án của mình.