트윗에는 text만 있는게 아니라 이미지/동영상 등도 있다.
이를 구현하기 위해서는 Firebase의 Storage를 사용하면 된다.

bucket은 내 파일을 넣는 곳이다.

트윗할 때 이미지 첨부 기능 넣기

트윗할 때 사진을 첨부할 수 있도록 type이 file이고 이미지 파일만 첨부가능한 input을 만든다.

📍 routes/Home.js

<div>
  <form onSubmit={onSubmit}>
    <input
      type="text"
      placeholder="무슨 일이 일어나고 있나요?"
      maxLength={120}
      value={tweet}
      onChange={onChange}
      />
    <input type="file" accept="image/*" />
    <input type="submit" value="트윗하기" />
  </form>
</div>

이미지 파일을 선택 시 미리보기 제공

트윗할 때 이미지 파일을 첨부하려고 선택하면 미리보기를 제공하자.

1. file input에 onChange 이벤트를 준다.

<input type="file" accept="image/*" onChange={onFileChange} />

2. onChange 이벤트를 수신하는 onFileChange 리스너에서 event를 콘솔에 찍어보자.

   const onFileChange = (event) => {
     console.log(event);
   };

• event.target.files에서 선택한 파일을 확인할 수 있다!
  

  • files에는 FileList가 있는데 첫 번째(0) 엘리먼트를 보니 name, type에 정보가 다 뜬다.

• 파일리스트에서 첫번째 엘리먼트를 가져오자.

  //file 미리보기 제공
  const onFileChange = (event) => {
    //console.log(event);
    const {
      target: { files },
    } = event;
    //파일은 하나만 넣을 수 있게..^^;;
    const theFile = files[0];
    console.log(theFile);
  };

fileReader API 사용하여 파일 읽기

3. 파일을 가져오는데 성공했으니 이제 파일을 읽어와서 사용자에게 보여줘야 한다.

FileReader API
파일리더 API는 파일 읽어서 저장할 수 있게 해준다.

📍 routes/Home.js

const onFileChange = (event) => {
  const {
    target: { files },
  } = event;
  //파일은 하나만 넣을 수 있게..^^;;
  const theFile = files[0];
  //console.log(theFile);
  //1. 파일리더 새로 만들고
  const reader = new FileReader();
  //3. 파일 읽기 끝나면(reader.onloadend) finishedEvent를 받는다.
  reader.onloadend = (finishedEvent) => {
    //콘솔에 찍어보면 finishedEvent.target.result에 이미지 url이 생성된 것을 확인할 수 있다.
    console.log(finishedEvent);
  };
  //2. 리더에 dataURL로 읽기 메서드로 theFile 읽기 시작/ 그러면 data 얻음
  reader.readAsDataURL(theFile);
};

• console.log(finishedEvent);를 해보면 finishedEvent.target.result에 이미지 주소가 생성된 것을 확인할 수 있다.
  
  • 이 텍스트를 브라우저 주소창에 입력하면 첨부한 사진이 뜬다!

• 첨부한 사진 데이터 들어있는 위치
  : 이벤트의 현재 타겟의 결과 finishedEvent.currentTarget.result

4. 첨부한 이미지의 url을 사용할 수 있도록 useState()를 사용하여 첨부한 이미지 파일이 있으면 그 이미지 파일 url을 사용하여 preview img가 뜨도록 만들자.

//첨부파일 readAsDataURL로 받은 데이터 넣어 두는 state
//attachment에 들어온 url은 첨부파일 미리보기 img src로 활용
const [attachment, setAttachment] = useState();

//생략

//file 미리보기 제공
reader.onloadend = (finishedEvent) => {
  //콘솔에 찍어보면 finishedEvent.target.result에 이미지 url이 생성된 것을 확인할 수 있다.
  //console.log(finishedEvent);
  // 첨부한 사진 데이터 들어있는 위치: 이벤트의 현재 타겟의 결과
  const {
    currentTarget: { result },
  } = finishedEvent;
  setAttachment(result);
};

//생략

// attachment가 있을 때만 img 나오게하기
{attachment && (<img src={attachment} alt="preview" width="50" height="50" />)}

5. 파일 업로드 취소 버튼 만들기
   생각이 바껴서 업로드를 하고 싶지 않을 때 첨부한 파일을 취소할 버튼이 필요하다!

취소 버튼을 만들고, 취소 버튼 클릭시(onClick) onClearAttachment 리스너가 실행되게 한다.
setAttachment()에 null을 보내 img의 소스를 없애준다.

//첨부 사진 취소하는 버튼
const onClearAttachment = () => {
  setAttachment(null);
};


//생략

{attachment && (
            <div>
              <img src={attachment} alt="preview" width="50" height="50" />
              <button onClick={onClearAttachment}>취소</button>
            </div>
          )}

6. setAttachment()에 null을 보내 첨부했던 이미지의 url은 제거했지만 아직 file input에 이미지 파일명이 남아 있다.

useRef() 훅을 사용하여 file input 변수를 만들고 file input과 연결시켜주면 된다.

const fileInput = useRef();

const onClearAttachment = () => {
  //1. 첨부파일 url 넣는 state 비워서 프리뷰 img src 없애기 
  setAttachment(null);
  //2. 선택했던 첨부파일명 없애기
  fileInput.current.value = null;
};

//생략

//첨부파일 선택하는 input
//useRef() 사용위해 ref 속성 추가
<input type="file" accept="image/*" onChange={onFileChange} ref={fileInput}/>
//프리뷰 이미지
{attachment && (
            <div>
              <img src={attachment} alt="preview" width="50" height="50" />
              <button onClick={onClearAttachment}>취소</button>
            </div>
          )}

오케이! 이제 파일첨부를 취소하면 첨부됐던 파일명도 없어진다!