Firebase 이미지 업로드, 불러오기

upload step

1. 커스텀한 이미지 버튼 클릭 (useRef로 보이지 않는 파일 input을 클릭하게 해준다.)
2. 파일을 선택하고, 파일의 정보를 imageUpload에 담는다.
3. 이미지 파일을 파이어베이스 스토어에 저장하고, url값을 받아와 image에 담는다. (useEffect에 의존성을 부여해서, imageUpload 값이 초기값에서 다른 값으로 변하면, 함수가 동작한다.)
4. 이미지 프리뷰창에 담은 url값으로 업로드 할 이미지를 보여준다. (uploadStep이 바뀜으로 버튼에서 이미지 프리뷰 버튼으로 바뀜)
5. 받은 이미지의 url값을 DB에 저장한다. (이미지 프리뷰 버튼을 한번 더 누르면, 함수가 동작함)
6. DB에 저장된 이미지의 url값으로 이미지 목록을 뿌려?준다.

import

// firebase
import {
  firebaseApp,
  firebaseDb,
  firebaseStorage,
} from "../../../firebase.config";
import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
import {
  addDoc,
  collection,
  getDocs,
  getFirestore,
  orderBy,
  query,
} from "firebase/firestore";

state

// file input click from custom button
const fileInput = useRef(null);
// image file
const [imageUpload, setImageUpload] = useState<any>("");
// uploaded image url
const [image, setImage] = useState("");
// fetch images url data
const [images, setImages] = useState([]);
// image upload step flag
const [uploadStep, setUploadStep] = useState(1);

• 선언한 useState들과 간략한 쓰임의 용도를 주석처리를 하였다.

file input onChange func

// select fileInput func (onChange)
const selectFile = (file) => {
  console.log(file);
  setImageUpload(file);
  setUploadStep(2);
};

image upload & get image url func

// if change imageUpload value, func start
useEffect(() => {
  const imageRef = ref(firebaseStorage, `photo/${imageUpload.name}`); // storage directory (path, file name)
  if (!imageUpload) return;
  uploadBytes(imageRef, imageUpload).then((snapshot) => {
    getDownloadURL(snapshot.ref).then((url) => {
      setImage(url);
      console.log(url);
    });
  });
}, [imageUpload]);

img url add firebase DB func

// image url add firebase db func
const uploadImgUrl = async () => {
  await addDoc(collection(firebaseDb, "photo"), {
    imgUrl: image,
    timestamp: new Date(),
  });
  fetchImages();
  setImageUpload("");
  setImage("");
  setUploadStep(1);
};

img url data fetch func

// fetch images func
async function fetchImages() {
  const photo = collection(getFirestore(firebaseApp), "photo");
  const result = await getDocs(query(photo, orderBy("timestamp", "desc")));
  const fetchData = result.docs.map((el) => el.data());
  setImages(fetchData);
}

// first time fetch
useEffect(() => {
  fetchImages();
}, []);

• 이미지 url을 파이어베이스 DB에 등록하고 불러오는 부분은 기존의 코맨트를 저장하고 불러오는 것과 동일한 방법이다.