[Twitter Clone Coding] #4 FILE UPLOAD

https://nomadcoders.co/nwitter

트위터 클론코딩 – 노마드 코더 Nomad Coders

*노마드코더 트위터 클론코딩 강의내용을 정리한 글입니다. 

**강의에서는 Firebase v8 를 사용했지만 여기서는 Firebase v9을 사용하여 구현했습니다.

 

Preview Images

• Firebase 콘솔 ⇒ Storage ⇒ 시작하기
• Bucket : 파일이 저장되는 곳
• Rules에서 파일 읽기와 업로드 권한을 허용해주어야함 ⇒ 권한없을 시 에러 발생

FileReader API

https://developer.mozilla.org/ko/docs/Web/API/FileReader

• 파일을 읽는 API

// Home.js
// ...생략

const onFileChange = (event) => {
    const files = event.target.files;
    const file = files[0];
    const reader = new FileReader();

		// 이미지 입력 input태그에 이벤트리스너를 부착 
		// ⇒ 파일의 로드가 끝나면 이미지 URL로 변환 
		// ⇒ URL을 활용하여 표시
    reader.onloadend = (finishedEvent) => {
      const result = finishedEvent.currentTarget.result;
      setFileUrl(result);
    };
		// file reader를 통해 이미지 파일을 url로 변환
    reader.readAsDataURL(file);
  };

// ...생략

Uploading

https://firebase.google.com/docs/storage/web/start/

https://firebase.google.com/docs/storage/web/upload-files

• getStorage를 사용해 storage 추가

// fb.js
import { getStorage } from "firebase/storage";

// ...생략
export const fbStorage = getStorage(fbApp);

• ref() 함수를 사용해 버킷 저장경로에 대한 참조 생성
• uploadBytes(), uploadString() 등의 함수를 사용해 파일 업로드

// Home.js
const onSubmitHandler = async (event) => {
    event.preventDefault();
    try {
      // ...nweet 전송코드 생략

			// 버킷 저장경로에 대한 ref생성
			// 경로가 겹치는 경우 덮어쓰기 되므로 구분할 id필요 => uuid모듈을 사용할 수도 있음
      const storageRef = ref(fbStorage, `${userInfo.uid}/${new Date().getTime()}`);
      const res = await uploadString(storageRef, fileUrl, "data_url");
      console.log(res);

      setNweet("");
    } catch (error) {
      console.log(error);
    }
  };

File URL and Nweet

https://firebase.google.com/docs/storage/web/download-files

• getDownloadURL을 통해 파일이 저장된 경로 획득

// Home.js
const onSubmitHandler = async (event) => {
		event.preventDefault();
    try {
			// 파일없이 nweet을 작성하는 경우를 고려하여 if문으로 분기, let으로 블록스코르를 고려
      let attachmentUrl = null;
      if (fileUrl) {
        const storageRef = ref(fbStorage, `${userInfo.uid}/${new Date().getTime()}`);

        // 파일 업로드
        await uploadString(storageRef, fileUrl, "data_url");
        attachmentUrl = await getDownloadURL(storageRef);
      }

      const nweetData = {
        nweet,
        createdAt: new Date(),
        creatorId: userInfo.uid,
        attachmentUrl,
      };

      // 파일이 저장된 url과 함께 nweet생성
      const res = await addDoc(collection(fbStore, "nweets"), nweetData);
      console.log(`res`, res);

      setNweet("");
    } catch (error) {
      console.log(error);
    }
  };

Deleting Files

https://firebase.google.com/docs/storage/web/delete-files

• 파일을 삭제해야하지만 파일이름을 알수 없다. (uuid 등으로 랜덤하게 생성)
• ref함수의 두번째 인자로 url을 넣어 참조를 얻을 수 있다.
• 이후 deleteObject함수를 이용해 파일 삭제

// Nweet.js
const deleteNweet = async () => {
    const ok = window.confirm("Are you sure you want to delete this Nweet?");

    if (ok) {
      await deleteDoc(doc(fbStore, "nweets", nweet.id));

			// 사진이 있는경우만 고려
      if (nweet.attachmentUrl) {
        const deleteRef = ref(fbStorage, nweet.attachmentUrl);
        await deleteObject(deleteRef);
      }
    }
  };