[supabase] storage에 올린 file의 URL 얻기

Ji Won·2024년 1월 11일

supabase

회원가입시 프로필 사진을 같이 등록해주기 위해서 이미지를 스토리에 등록하던 중 발생했던 문제에 대해 풀어보고자 한다.
(어쩌면 내가 Docs를 잘 볼 줄 몰라서 일어난 문제일지도..영어공부하자..!😭)

supabase storage fileURL 얻어오기

supabase는 파일을 업로드 하는 공간을 따로 제공하고 있기 때문에 database나 auth에 이미지를 함께 올리고 싶다면

storage에 파일을 업로드 한 후
해당 url을 받아서
database/auth에 올려주어야 한다.

이 글에서는 위 3단계중 2단계까지 구현할 예정이다.

참고로 본인은 Next.js와 typeScript를 사용하고 있다.

일단 이미지를 업로드 할 input 태그와 그에 필요한 함수를 만들어 onChange를 연결 해준 후 트리거가 될 버튼을 만들어서 함수를 생성한다.

const [uploadImg, setUploadImg] = useState<File | null>();

// storage에 파일 업로드 함수
const singUpOnSubmitHandler = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    if (uploadImg) {
    // upleadImg가 존재할 경우 아래 supabase 로직을 실행할 것.
      const { data, error } = await supabase.storage
        .from('profile_avatar')
        .upload(`profile/${Date.now()}_${Math.floor(Math.random() * 1000)}`, uploadImg);
    }
    
// onchange     
 const imageOnchangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setUploadImg(e.target.files![0]);    
  };


return 
...
...

 <input type="file" accept="image/*" id="preview" onChange={imageOnchangeHandler} />
      </label>

supabase에서 제공하는 storage에 파일을 업로드 하는 로직이다.

.from()안에는 넣고자 하는 파일이 들어갈 bucket의 명을 문자열로 적어준다.
.upload()안에는 1번째 인자로는 file_path, 2번째 인자로는 넣고자 하는 파일을 넣어주면 된다.
file_path의 경우 내가 지정하면 되는데 file_path가 똑같으면 파일이 최초 1회만 업로드 되고 이후는 에러가 나니 자동으로 바뀌는 값(uuid나 Math.random()등)을 사용하길 추천한다.

위와 같이 적은 후 함수를 실행시키면 data 값에는

와 같이 3가지의 값이 들어온다.

처음엔 저 fullpath값이 URL대체제 인 줄 알고 사용하려 했으나 당연히 아니었음..!
그래서 다운로드를 하면 URL값을 얻을 수 있을까 싶어 시도해봤으나 장렬히 실패..!

다시 해결책을 찾다가 발견한 Docs페이지
https://supabase.com/docs/guides/storage/serving/downloads#signing-urls

위 url에 들어가면 보이는 공식문서에서는

와 같이 코드를 제공한다.

위 코드를 참고하여

const singUpOnSubmitHandler = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (uploadImg) {
      const { data, error } = await supabase.storage
        .from('profile_avatar')
        .upload(`profile/${Date.now()}_${Math.floor(Math.random() * 1000)}`, uploadImg);

      const publicUrl = supabase.storage.from('profile_avatar').getPublicUrl(`${data!.path}`);
    }