Next #06 Minibox

이번에는 Supabase 의 Storage를 활용해서 파일을 업로드 할 수 있는 MiniBox 라는 프로젝트를 진행하려 한다.

Supabase의 Storage의 New bucket을 Public으로 만들어준다.

이미지를 관리할 것이기 때문에 이미지 경로 셋팅을 해준다.
이전에 .env 파일에서 정의 해놓은 경로를 활용.

utils/supabase/storage.ts

export function getImageUrl(path){
    return `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/${process.env.NEXT_PUBLIC_STORAGE_BUCKET}/${path}`;
}

CRUD

acstions/storageAction.ts

"use server";

import { createServerSupabaseClient } from "utils/supabase/server";

function handleError(error){
    if(error){
        console.error(error);
        throw error;
    }
}

export async function uploadFile(formData : FormData){
    const supabase = await createServerSupabaseClient();
    const files = Array.from(formData.entries()).map(([name, file]) => file as File);

    const results = await Promise.all(files.map(file => 
        supabase.storage
        .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET)
        .upload(file.name, file, {upsert: true})
        )
    );

    return results;
}

export async function searchFiles(search: string = ""){
    const supabase = await createServerSupabaseClient();

    const { data, error } = await supabase.storage
    .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET)
    .list(null, {
        search,
    });

    handleError(error);

    return data;
}

export async function deleteFile(fileName: string){
    const supabase = await createServerSupabaseClient();

    const { data, error } = await supabase.storage
    .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET)
    .remove( [fileName] );

    handleError(error);

    return data;
}

Upload File 시 한번에 한개씩 올리기

export async function uploadFile(formData: FormData) {
  const supabase = await createServerSupabaseClient();
  const file = formData.get("file") as File;

  const { data, error } = await supabase.storage
  .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET)
  .upload(file.name, file, { upsert: true });
}

handleError(error);

return data;