Supabaseで画像保存

const [file, setFile] = useState<string[]>([]);

<FileTrigger
  onSelect={(e) => {
    if (!e) return;
    let files = Array.from(e);
    let filenames = files.map((file) => file.name);
    setFile(filenames);
  }}>
  <Button>Select a file</Button>
</FileTrigger>
{file && file}

const handleOnFileSelect = (e: FileList | null) => {
  if (!e) return;
  let files = Array.from(e);
  let filenames = files.map((file) => file.name);
  setFile(filenames);
}

<FileTrigger
  onSelect={handleOnFileSelect}>
  <Button>Select a file</Button>
</FileTrigger>
{file && file}

const handleOnFileSelect = async (e: FileList | null) => {
  if (!e) return;
  const supabase = createBrowserClient(SUPABASE_URL, SUPABASE_ANON_KEY);

  let files = Array.from(e);
  let filenames = files.map((file) => file.name);
  setFile(filenames);

  const file = files[0] // 選択された画像を取得
  console.log({ file });
  const { data: { user } } = await supabase.auth.getUser();
  if (user == null) {
    // ここでエラーハンドリング
    return;
  }
  const filePath = `${user.id}/${new Date().getTime()}`
  const backetName = 'profile'
  const { error } = await supabase.storage
    .from(backetName)
    .upload(filePath, file)
  if (error) {
    // ここでエラーハンドリング
  }

  const { data } = supabase.storage.from(backetName).getPublicUrl(filePath)
  const imageUrl = data.publicUrl

  setUploadFilePath(imageUrl)
}

 $ supabase migration new create_objects_table

create table buckets (
    id text primary key,
    name text not null,
    created_at timestamp with time zone default now(),
    updated_at timestamp with time zone default now(),
    public boolean default false,
    file_size_limit bigint,
    allowed_mime_types text[],
    owner_id text
);

create table objects (
    id uuid primary key default gen_random_uuid(),
    bucket_id text references buckets(id),
    name text not null,
    created_at timestamp with time zone default now(),
    updated_at timestamp with time zone default now(),
    metadata jsonb,
    path_tokens text[],
    version text,
    owner_id text
);

-- インデックスの作成
create index objects_bucket_id_idx on objects(bucket_id);
create index objects_name_idx on objects(name);
create index buckets_name_idx on buckets(name);

-- 更新日時を自動更新するためのトリガー関数
create or replace function update_updated_at_column()
returns trigger as $$
begin
    new.updated_at = now();
    return new;
end;
$$ language plpgsql;

-- bucketsテーブルの更新日時トリガー
create trigger update_buckets_updated_at
    before update on buckets
    for each row
    execute function update_updated_at_column();

-- objectsテーブルの更新日時トリガー
create trigger update_objects_updated_at
    before update on objects
    for each row
    execute function update_updated_at_column();