TIL / 20210706

📌오늘한 것

리액트 심화 4일차로 오늘은 파이어스토어에 image를 업로드하는 방법을 학습했다.업로드한 이미지 파일 보관은 firebase storage를 사용했다

<input type="file"/> 

코드를 사용하면 onChange 이벤트에 선택한 파일이 객체로 넘어온다.

그리고 이 input에 접근하기 위해서는 ref를 사용한다.

import React from "react";

const Upload = (props) => {

  const fileInput = React.useRef();

  const selectFile = (e) => {
    // e.target은 input이죠!
    // input이 가진 files 객체
    console.log(e.target.files);
    // 선택한 파일 저장 확인
    console.log(e.target.files[0]);

    // ref로도 확인
    console.log(fileInput.current.files[0]);
  };

  return (
    <React.Fragment>
      <input type="file" ref={fileInput} onChange={selectFile} />
    </React.Fragment>
  );
};

export default Upload;

이미지의 링크는 아래와 같이 가져올 수 있다.

const uploadFB = () => {
      let image = fileInput.current?.files[0];
      const _upload = storage.ref(`images/${image.name}`).put(image);

    //   업로드!
      _upload.then((snapshot) => {
        console.log(snapshot);

        // 업로드한 파일의 다운로드 경로를 가져오자!
        snapshot.ref.getDownloadURL().then((url) => {
            console.log(url);
        });
      });

  }