[트위터 클론 코딩] #7. File Upload

~4.4까지의 강의

4강 나중에 다시 들을 것

 

이제 버킷에 업로드해보자.

사진을 업로드할건데 사진이 있으면 url을 받아 그걸 nweet에 추가하는 것이다.

사진이 있으면 사진을 올리고 url을 받아 nweet에 넣는다. 

파일 url을 넣는 것을 한다.

 

그 전에 fbase.js로 가서,

export const storageService = firebase.storage();

 

Home.js

import { v4 as uuidv4 } from "uuid";
import { dbService, storageService } from "fbase";

const onSubmit = async (event) => {
      event.preventDefault();
      const fileRef = storageService.ref().child(`${userObj.uid}/${uuidv4()}`);
      const response = await fileRef.putString(attachment, "data_url");
      console.log(response);
      };

userObj.uid 밑에 파일 이름을 랜덤하게 생성하고 싶다면,

npm install uuid 

 

이제 파일을 갖게 되었다. 아무것도 업로드하지 않았으니까 파일에 대한 reference를 만들어 주는 것 뿐이다.

이제 다시 reference로 들어가서 업로드나 다운로드 할 수 있다.

 

rule에서 false로 되어 있으면 upload가 안된다. 왼쪽의 사진 처럼 변경해주자.

 

---

public url을 다운 받아서 링크로 연결시켜 보자.

 

Home.js

const onSubmit = async (event) => {
      event.preventDefault();
      let attachmentUrl = "";
      if (attachment != "") {
      const attachmentRef = storageService
        .ref()
        .child(`${userObj.uid}/${uuidv4()}`);
      const response = await attachmentRef.putString(attachment, "data_url");
      attachmentUrl = await response.ref.getDownloadURL();
    }
    const nweetObj = {
        text: nweet,
        createdAt: Date.now(),
        creatorId: userObj.uid,
        attachmentUrl,
      };
      await dbService.collection("nweets").add(nweetObj);
      setNweet("");
      setAttachment("");
    };

달라진 점에 주목을 해보자.

getDowmloadURL을 사용하기 위해 문법을 살짝 바꾸었다.

 

Nweet.js

{nweetObj.attachmentUrl && (
            <img src={nweetObj.attachmentUrl} width="50px" height="50px" />
          )}

 

---

사진을 지우는 것을 알아보자.

 

Nweet.js

 const onDeleteClick = async () => {
    const ok = window.confirm("Are you sure you want to delete this nweet?");
    if (ok) {
      await dbService.doc(`nweets/${nweetObj.id}`).delete();
      await storageService.refFromURL(nweetObj.attachmentUrl).delete();
    }
  };

코드 한 줄만 추가하면 쉽게 삭제할 수 있다.