Ngày càng rõ ràng rằng Supabase có thể trở thành một giải pháp thay thế cho Firebase.

Một bước hướng tới điều này đã được thực hiện vào ngày 30 tháng 3 với thông báo về dịch vụ Storage.

Một dịch vụ lưu trữ đối tượng mã nguồn mở với khả năng mở rộng không giới hạn cho bất kỳ loại tệp nào.

Trong hướng dẫn này, tôi trình bày một cách rất ngắn gọn, một dự án trong Angular 11 để tải lên các tệp tích hợp dịch vụ Supabase Storage.

Kho

Trong tài liệu có sẵn tạihttps://supabase.io/storage, các tính năng như khả năng tương tác, tích hợp với toàn bộ hệ sinh thái đã được phát triển và khả năng mở rộng được liệt kê.

Tôi thấy vấn đề chính sách và quyền dễ dàng thực hiện rất linh hoạt.

Thông qua bảng điều khiển, có thể duyệt và khám phá một cách rất trực quan với khả năng hiển thị cho các định dạng tệp đa dạng nhất

Ngoài ra còn có cung cấp cho các tính năng khác như tích hợp CDN và chuyển đổi và tối ưu hóa phương tiện tự động.

Tích hợp với Angular

Tôi đã tạo một dự án trong góc với ng new và sau đó cài đặt thư viện siêu cơ sở dữ liệu với

npm install @ supabase / supabase-js

Ban đầu, chúng tôi sẽ tạo một dịch vụ để thực hiện các phương pháp cho cả việc tạo nhóm và tải tệp lên.

Trong thiết bị đầu cuối của trình soạn thảo, tôi đã thông báo:

ng generate service storage

Việc thực hiện lớp như thế này:

• Chúng tôi xác định url và khóa bằng cách sử dụng thuộc tính subabaseUrl và supabaseKey. Các giá trị có sẵn trong bảng siêu cơ sở dữ liệu, như tôi đã đề cập trong bài viết trước của mình , đây không phải là cách thích hợp nhất vì nó làm lộ khóa.

• Trong phương thức khởi tạo lớp, chúng ta chuyển thông tin này để có quyền truy cập vào các phương thức thao tác trên Storage.
• createBucket () và getBucket () tạo và truy xuất một vị trí lưu trữ. Có thể có các thư mục con trong các thùng;
• upload () - chúng tôi thông báo cho nhóm, đường dẫn với tên và tệp sẽ được gửi đến máy chủ;
• download () - ngay cả khi tải lên, sự khác biệt là Blob trả về.
• Tất cả các phương thức trả về một dữ liệu và lỗi.

Đối với mục đích của hướng dẫn, tôi đã làm mọi thứ trong thành phần chính. Việc triển khai app.component.ts là như thế này.

Về việc thực hiện:

• Chúng tôi đã khai báo một số thuộc tính phụ kiện cho nội dung tải lên dưới dạng thông báo thông tin, trạng thái tải lên (có một div trong mẫu hiển thị tải) và vị trí vận chuyển (thùng);
• Chúng tôi đưa StorageService vào phương thức khởi tạo của thành phần;
• Chúng tôi đã triển khai phương thức để kiểm tra xem thùng đã tồn tại chưa, nếu không, nó tạo ra một nơi incheckBucketExists ();
• Trong selectFile , ban đầu, chúng tôi kiểm tra xem có tệp nào đã được chọn hay không, sau đó truy xuất tệp đó và xóa khoảng trắng khỏi tên bằng Replace (/ / g, '');
• Khi gọi tải lên, chúng tôi chuyển các trường cần thiết và kiểm tra xem có lỗi hay không hoặc cập nhật giao diện người dùng với thông báo và quá trình tải hoàn thiện.

<! - UPLOAD ->
<div class =" custom-file overflow-hidden rounded-pill mb-5 ">
<input id =" customFile "type = "file" (change) = "selectFile ($ event)" class = "custom-file-input rounded-pill">
<label for = "customFile" class = "custom-file-label rounded-pill"> Choose file < / label>
</div>
<! - End UPLOAD ->
<! - LOADING ->
<div * ngIf = "status" class = "spinner" style = "font-size: 18px">
<div class = "head"> </div>
</div>
<! - End UPLOAD ->
<div * ngIf = "message" class = "alert alert-success" role = "alert">
{{message}}
</div>

Vì chúng tôi không được xác thực, chúng tôi phải cho phép truy cập công khai vào nhóm được đề cập.

Sau đó, để ví dụ hoạt động, trong bảng điều khiển Supabse, hãy chạy lệnh

create policy” Public Access “
on storage.objects for all
using (bucket_id = photos);

Để tóm tắt, tôi đã bỏ qua ở đây mã hoàn chỉnh của mẫu trong ứng dụng và kiểu.

Tuy nhiên, bạn có thể xem đầy đủ trên Github của tôi bên dưới

Đó là nó. Cảm ơn.