ガイド

ファイルアップロード

ユーザーがアプリからアバター、写真、ドキュメントをアップロードできるようにします。ファイルはテーブルと同じ種類のセキュリティルールで保護されます。

← すべてのガイド

1. バケットを作成する

ストレージでバケットを作成します。公開バケット(例:avatars)は、URLを知っている誰にでもファイルを配信します。非公開バケット(例:documents)は署名付きリンクを通じてのみ配信します。ファイルサイズと許可するタイプ(例:image/*)を制限できます。

2. アップロードできるユーザー

アップロード、置き換え、削除はstorage.objectsのポリシーに従います。ポリシーを追加するまで、アプリからアップロードできる人はいません。ユーザーごとのフォルダが一般的なパターンです:

-- Signed-in users may upload, replace and delete files only in their own folder: <user id>/…
create policy "Upload to own folder" on storage.objects for insert
  with check (bucket_id = 'avatars' and (storage.foldername(name))[1] = espobase.user_id()::text);
create policy "Replace own files" on storage.objects for update
  using (bucket_id = 'avatars' and (storage.foldername(name))[1] = espobase.user_id()::text)
  with check (bucket_id = 'avatars' and (storage.foldername(name))[1] = espobase.user_id()::text);
create policy "Delete own files" on storage.objects for delete
  using (bucket_id = 'avatars' and (storage.foldername(name))[1] = espobase.user_id()::text);
-- For a private bucket, also allow reading your own files:
create policy "Read own files" on storage.objects for select
  using (bucket_id = 'documents' and (storage.foldername(name))[1] = espobase.user_id()::text);

3. アプリからアップロードする

const { data: me } = await espobase.auth.getUser();
const path = `${me!.user.id}/avatar.png`;

// Upload (upsert replaces an existing file at the same path).
const { error } = await espobase.storage.from("avatars").upload(path, file, { upsert: true });

// Public bucket: a permanent URL anyone can open.
const { publicUrl } = espobase.storage.from("avatars").getPublicUrl(path);

4. 非公開ファイルと署名付きリンク

// Private bucket: a link that works for 10 minutes, created by someone allowed to read the file.
const { data } = await espobase.storage.from("documents").createSignedUrl(`${userId}/contract.pdf`, 600);
window.open(data!.signedUrl);

// List and delete
const { data: files } = await espobase.storage.from("documents").list(`${userId}/`);
await espobase.storage.from("documents").remove([`${userId}/old.pdf`]);

知っておくと便利なこと

  • アップロードはプランのファイルストレージに、ダウンロードは帯域幅にカウントされます。
  • <user id>/avatar.pngのようなパスは単なる名前です。フォルダはアップロードに応じて表示されます。
  • シークレットキー(サーバー上でのみ使用)は、テーブルと同様にストレージのポリシーもバイパスします。