firebase 8 파일 업로드, 삭제

김부릉·2023년 4월 6일
0

firebase에서 이미지나 데이터는 cloud storage에 따로 저장이 된다.

import { ref, uploadString, getDownloadURL } from "firebase/storage";

const [nweet, setNweet] = useState("");
const [attachment, setAttachment] = useState();

const onSubmit = async (event) => {
    event.preventDefault();
    let attachmentUrl = "";
    if (attachment !== "") {
      const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
      const response = await uploadString(fileRef, attachment, "data_url");
      attachmentUrl = await getDownloadURL(response.ref);
    }
    const newNweet = {
      text: nweet,
      createdAt: Date.now(),
      createId: userObj.uid,
      attachmentUrl,
    };
    await addDoc(collection(dbService, "nweets"), newNweet);
    setNweet("");
    setAttachment("");
  };
  
  const onFileChange = (event) => {
    const {
      target: { files },
    } = event;
    const theFile = files[0];
    const reader = new FileReader();
    reader.onloadend = (finishedEvent) => {
      const {
        currentTarget: { result },
      } = finishedEvent;
      setAttachment(result);
    };
    reader.readAsDataURL(theFile);
  };
  
  
  const onDeleteClick = async () => {
    const ok = window.confirm("Are you sure you want to delete this nweet?");
    if (ok) {
      await deleteDoc(doc(dbService, "nweets", `${nweetObj.id}`));
      if (nweetObj.attachmentUrl) {
        await deleteObject(ref(storageService, nweetObj.attachmentUrl));
      }
    }
  };
  • 앱의 firebaseConfig 객체에 버킷 URL과 함께 storageBucket 속성을 추가

  • FileReader 인스턴스를 생성하여 비동기적으로 파일을 읽어드린다.

  • onloadend 이벤트, 파일 읽기가 끝나면 실행 onloadend 이벤트가 발생하면 result를 setAttachement()에 넣는다. 첨부파일 미리보기에 활용

  • readAsDataURL 는 파일에서 DATA URI를 얻어서 result 속성에 담는다.

  • ref()를 사용하여 파일을 저장할 참조를 만든다.

  • uplaodString() 은 파일을 문자열로 저장할 때 사용하는데. 파일의 참조와, 문자열, 타입을 넣는다.

  • getDownloadURL()로 파일의 URL을 가져온뒤 nweet 객체를 생성하여 firestore에 추가한다.

  • 파일의 삭제는 deleteObject() 메소드에 참조를 넣는다.

0개의 댓글