[Supabase] Supabase 이미지 업로드 기능 사용방법 A to Z

버킷 생성

1) Storage > New bucket 클릭

2) 버킷 이름 입력 후 공개 버킷 설정

(주의 : 공개 버킷 설정 시 익명의 사용자가 아무런 승인 없이 버킷 내 객체(이미지 파일)을 읽을 수 있으므로 보안 수준이 낮아지는 것을 유의해야합니다.)

 

버킷 정책 설정

1) Policies > 생성된 버킷명 우측 New policy 클릭

2) For full customization 클릭

3) Policy name 입력, Allowed operation 설정 후  Review 클릭

4) 생성될 정책을 미리본 후 Save policy 클릭

 

실습

import React, { useState } from 'react';

const FileInputForm = () => {
  const [file, setFile] = useState(null);
  const [previewUrl, setPreviewUrl] = useState(null);

  // 파일 선택 이벤트 처리
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0]; // 선택한 파일 객체
    if (selectedFile) {
      setFile(selectedFile); // 파일 객체를 state로 저장
    }
  };

  // 파일 제출 처리
  const handleSubmit = (event) => {
    event.preventDefault();
    if (file) {
      const filePath = "test-image.png"; // 저장할 파일명
      const response = await supabase.storage // Supabase Storage 이미지 업로드 코드
	    .from('test-images')
	    .upload(filePath, file);
    } else {
      alert('파일을 선택하세요.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="file-input">
          파일 선택:
        </label>
        <input
          type="file"
          id="file-input"
          onChange={handleFileChange}
          accept="image/*" // 이미지 파일만 선택 가능 (필요 시 제거 가능)
        />
      </div>
      <button type="submit">파일 제출</button>
    </form>
  );
};

export default FileInputForm;

이미지가 스토리지에 성공적으로 업로드된 것을 확인할 수 있다.