Ionic React 및 Capacitor 카메라를 사용한 Supabase 스토리지 이미지 업로드 튜토리얼

같은 주제로 촬영한 영상을 응원하기 위한 포스팅입니다. 비디오는 두 부분으로 나뉘었는데, 하나는 Ionic Framework in ReactJS 플러그인과 작동하도록 설정하는 것Capacitor Camera이고 다른 부분은 카메라에서 캡처한 이미지를 Supabase Storage 에 업로드하는 것이었습니다.

비디오

카메라 이미지 업로드

모든 마법은 여기서 일어난다

 /**
   * upload to storage bucket, convert path to blob
   * get file name from path
   * 
   * @param path
   */
  const uploadImage = async (path: string) => {
    const response = await fetch(path);
    const blob = await response.blob();

    const filename = path.substr(path.lastIndexOf("/") + 1);

    const { data, error } = await supabase.storage
      .from("image-bucket")
      .upload(`${filename}`, blob, {
        cacheControl: "3600",
        upsert: false,
      });

    if (error) alert(error?.message);

    console.log(data);

    getAllImages();


    return true;
  };

Capacitor Camera Plugin에서 webPath를 가져오고 fetch를 사용하여 blob을 얻은 다음 supabase에 업로드합니다.

Supabase에서 이미지 다운로드

여기서 내가 하는 일은 별도의 구성 요소RenderImage를 만들고 초기useEffect 후크에서 supabase에 대한 API 호출을 만들어 이미지의 publicURL을 가져오고 변수가 설정되면 로컬 상태 변수로 설정합니다. 이미지가 화면에 그려집니다.

const RenderImage: React.FC<any> = ({ path }) => {
  const [publicUrl, setPublicUrl] = useState<any>("");
  useEffect(() => {
    (async () => {
      const { publicURL } = supabase.storage
        .from("image-bucket")
        .getPublicUrl(path);

      setPublicUrl(publicURL);
    })();
  },[path]);

  return <IonImg src={publicUrl} />;
};

나머지는 모두...

비디오의 나머지 부분은 supabase api와 사용을 위해 버킷을 설정하는 방법에 대한 자세한 설명입니다.

소스 코드

https://github.com/aaronksaunders/ionic-react-supabase-simple-storage