[firebase] Storage 스토리지 버킷 파일 수정 방법

 

개삽질의 결과물을 기록해본다.

 

결론만 말하면, 기존 파일을 지우고 새로 올리면 된다.

 

 

의도

내가 작성한 글에서 이미지를 수정하면 Firestore에 저장한 이미지 URL은 물론이고 Storage 의 이미지 원본도 변경

 

 

FireStore

 

 

Storage Bucket

 

 

이전 코드

1) fileRef에서 기존 파일의 ref를 가져오는게 쉽지 않았다.

 

2) 결국 이전 파일의 url을 넣으면 위치가 잡히는 걸 알았음.

*firestore는 콜렉션->문서 단위로 접근해야하는데 storage는 바로 파일 주소 떄려박으니까 됨

 

3) 그러나 오류 : root 파일을 직접 변경할 수 없다 (child를 만들어라!)

* 나는 직접 바꾸고 싶은데??

/* 피드 수정 */

export const updateFeed = async (feed, editRef, feedList, newFileUrl) => {

  /* Storage 업데이트 */

  const fileRef = ref(storage, `기존 파일 Url`);

  const response = await uploadString(fileRef, newFileUrl, "data_url");

  const newImgUrl = await getDownloadURL(response.ref);

  console.log(newImgUrl);

  /* Firestore 업데이트 */

  const feedRef = doc(db, "feeds", `${feed.id}`);

  await updateDoc(feedRef, {

    createdAt: Timestamp.now(),

    feedText: editRef.current.value,

    imgUrl: newImgUrl,

  });

  const feedIndex = feedList.findIndex((item) => item.id === feed.id);

  const updatedFeed = {

    ...feedList[feedIndex],

    createdAt: Timestamp.now(),

    feedText: editRef.current.value,

    imgUrl: newImgUrl,

  };

  const prevList = feedList.slice(0, feedIndex);

  const nextList = feedList.slice(feedIndex + 1);

  const newList = [...prevList, updatedFeed, ...nextList];

  return newList;

};

 

 

수정 코드

1) 게시판을 생각했다. 내가 게시판에서 새로운 이미지로 바꾸고 싶으면 어떻게 했지?

*기존 것을 '지우고' 새로운 이미지를 올렸다.

2) 아 기존것 지우고 새로 올리면 되는데 왜 그 위치 그대로에서 파일만 바꾸고 싶었을까?

3) 우여곡절 끝에 의도대로 작동을 한다.

/* 피드 수정 */

export const updateFeed = async (feed, editRef, feedList, newFileUrl) => {

  /* Storage 업데이트 */

  /* 이전꺼 삭제하고 */

  await deleteObject(ref(storage, feed.imgUrl));

  /* 새로 등록함 */

  const fileRef = ref(storage, `${feed.creatorId}/${uuidv4()}`);

  const response = await uploadString(fileRef, newFileUrl, "data_url");

  const newImgUrl = await getDownloadURL(response.ref);

  console.log(newImgUrl);

  /* Firestore 업데이트 */

  const feedRef = doc(db, "feeds", `${feed.id}`);

  await updateDoc(feedRef, {

    createdAt: Timestamp.now(),

    feedText: editRef.current.value,

    imgUrl: newImgUrl,

  });

  const feedIndex = feedList.findIndex((item) => item.id === feed.id);

  const updatedFeed = {

    ...feedList[feedIndex],

    createdAt: Timestamp.now(),

    feedText: editRef.current.value,

    imgUrl: newImgUrl,

  };

  const prevList = feedList.slice(0, feedIndex);

  const nextList = feedList.slice(feedIndex + 1);

  const newList = [...prevList, updatedFeed, ...nextList];

  return newList;

};

 

 

완료