4.Storage

---

1.Preview Images

• Storage 에 저장 하기전에 react project app 에서 img 파일을 업로드를 해서 읽은 다음에 preview 해보기

fileReader

• fileReader API 를 통해서 업로드된 파일을 읽고 preview 사진 업로드 없애기

// Create State
  const [attachment, setAttachment] = useState();

    // fileUpload function
  const onFileChange = (e) => {
    // es6 의 구조분해 할당 target 안에 files 를 event listener 로 받은 값을 files 에 저장
    const {
      target: { files },
    } = e;
    // 배열의 첫번째 파일만 theFile 로 선언하고 fileReader API 를 통해 이미지 파일 읽기
    const theFile = files[0];
    const reader = new FileReader();
    reader.onloadend = (finishedEvent) => {
      const {
        currentTarget: { result },
      } = finishedEvent;
      setAttachment(result);
    };
    reader.readAsDataURL(theFile);
  };

  // Delete Photo
  const onClearAttachment = () => {
    setAttachment(null);
  };

  return (
  {attachment && (
    <div>
<img src={attachment} alt="img" width="50px" height="50px" />
    <button onClick={onClearAttachment}>Clear Photo</button>
  </div>
)}
  )

2.Upload to Firebase Storage

• firebase.js (아래 예시에서는 fbase.js) 에서 firebase storage service import

// in fbase.js
import "firebase/storage";

export const storageService = firebase.storage();

firebase.storage.Reference

• reference 는 google cloud storage object 에 대한 참조를 나타 내는것 이것이 bucket 인것입니다.

reference child

• 여기서 child에 넣을것은 기본적으로 upload 한 파일의 path 임 collection 과 비슷한데 폴더를 만들어서 파일을 관리합니다.

📌 참고: path 를 만들때 uuid 를 사용해서 기본적으로 어떤 특별한 식별자를 랜덤으로 생성해줌 yarn 또는 npm package 설치해서 사용할 수 있습니다. (unique identify)

uuid package

yarn add uuid

// create uuid
import { v4 as uuidv4 } from "uuid";
uuidv4();

// Create reference.child
const fileRef = storageService.ref().child(`${userObj.uid}/${uuidv4()}`);

• fileReference 를 만든다음에 putString 을 통해서 fileUpload 한 string 을 넣어 줍니다.

putString

const response = await fileRef.putString(attachment, "data_url");

• getDownloadURL 을 사용해서 reference 의 public url 을 알아낸다음에 chatObj 의 object data 로 추가 시켜 줍니다.

let attachmentUrl = await response.ref.getDownloadURL();
const chatObj = {
  text: chat,
  createAt: Date.now(),
  creatorID: userObj.uid,
  attachmentUrl,
};

getDownloadURL

3.Delete file

• Delete 라기 위해선 attach 된 파일 즉, firebase storage 에 저장된 파일(사진) 도 같이 삭제 해줘야 하는데 attachmentUrl 에 사용된 public url 을 firebase method 의 refFromURL 에 넘긴다면 그 object 에 대한 reference 를 얻을 수 있게 되서 delete 하기 쉬워 진다.

refFromURL

const onDeleteClick = async () => {
  const check = window.confirm("정말로 메세지를 삭제하시겠습니까?");
  if (check) {
    // delete chat
    await dbService.doc(`chats/${chatObj.id}`).delete();
    // delete uploadFile
    await storageService.refFromURL(chatObj.attachmentUrl).delete();
  }
};

🔶 🔷 📌 🔑

Reference

• normad corder firebase - https://nomadcoders.co/nwitter/lobby