SUPABASE_스토리지저장 후 URL Table에 저장하기

모바일 청첩장이다보니 많은 사진들이 들어간다. 처음에는 base64 형식으로 이미지를 넣어주었는데 웨딩 사진인만큼 용량이 클 것 같아 스토리지에 사진을 저장 후 URL을 넣어주기로 하였다.

처음로직

const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setValue('mainPhotoInfo.imageUrl', reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

---

supabase 업로드변경

  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const getPublicUrl = await uploadImageToSupabaseStorage(file);
      if (getPublicUrl) {
        setValue('mainPhotoInfo.imageUrl', getPublicUrl);
      }
    }
  };

import { supabase } from './supabase/createClient';

export const uploadImageToSupabaseStorage = async (file: File) => {
  const fileName = `file_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
  const { data, error } = await supabase.storage.from('invitation').upload(`/main_img/${fileName}`, file);

  if (error) return console.error('대표사진 업로드를 실패하였습니다.', error);

  const { data: urlData } = supabase.storage.from('invitation').getPublicUrl(data.path);
  console.log(urlData.publicUrl);
  return urlData.publicUrl;
};