[ Fire Base / ver. 9.14.0 ] 3-2. 이미지 업로드, 삭제 기능

3-1. 이미지업로드 게시글과 이어지는 내용이다.

3-1게시글에선 업로드가 가능할 수 있는 기능만 추가해준 것이고

 

3-2에선 확실하게 마운트 시켜주고 삭제시키는 기능을 구현했다.

 

# 메소드 영역

import {storageService} from "Fbase";
//Fbase.js에서 getStorage from "firebase/storage"를 가져온 것

import {ref, uploadString, getDownloadURL } from "@firebase/storage";
import { v4 as uuidv4 } from 'uuid';

export const Home = ({ userObj }) { 

//...

const [attachment, setAttachment] = useState("");
//업로드할 사진을 위한 스테이트

const onSubmit = async (event)=> {
    event.preventDefault();
    let attachmentUrl = "";    //서로 영역에서 사용하기 위해 let으로 선언하여 업데이트함.
    try{
        if(attachment !== "") {
            const attachmentRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
            //uuidv4는 랜덤으로 스트링을 만들어준다.
            
            const response = await uploadString(attachmentRef, attachment, "data_url");
            //"data_url"은 readAsDataURL에서 전달받는다.
            
            attachmentUrl = await getDownloadURL(response.ref);
        }
        const zweetObj = {
            text: zweet,
            createdAt: Date.now(),
            creatorId: userObj.uid,
            attachmentUrl               //zweetObj에서 attachmentUrl이 추가되었다.
        };
        await addDoc(collection(dbService, "zweets"),zweetObj);
    } catch (error) {
        console.error("Error adding document: ", error);
    }
    setZweet("");
    setAttachment("");   //서브밋 후 초기화
};

 

Home.js에서 onSubmit함수의 변경사항

 

const onDeleteClick = async () => {
    const ok = window.confirm("Are you sure you want to delete this zweet?");
    if(ok){
        await deleteDoc(zweetTextRef);
        
        await deleteObject(ref(storageService, zweetObj.attachmentUrl));
        //이미지가 있다면 이미지도 지워줘야 하기때문에 추가
    }
};

Zweet.js에서 onDeleteClick함수의 변경사항

 

# 컴포넌트 마운트 영역

<div>
    <h4>{zweetObj.text}</h4>
    {zweetObj.attachmentUrl && <img src={zweetObj.attachmentUrl} width="50px" height="50px"/>}
 //zweetObj에 attachmentUrl(이미지파일url)리터럴이 생겼기 때문에 zweetObj.attachmentUrl로 변경
    
  ...
   
</div>

지우거나 업로드 했을때 사진도 함께 업로드 되거나 삭제되어야 하기때문에 함수들에 변경사항이 생겼다.