Firebase 저장소 소개 #2: 파일 검색 및 삭제

안녕하세요 여러분, 이 기사에서는 How to Upload Files to Firebase Cloud Storage에 대한 이전 기사에서 중단한 부분부터 계속하겠습니다. 이제 Firebase Cloud Storage에서 파일을 검색하고 삭제하는 방법을 알아봅니다.

Firebase에서 파일 검색

Firebase Cloud Storage를 설정하고 이 기사에서 계속 빌드할 프로젝트를 만드는 방법을 알아보려면 이전 기사를 참조하세요.

1단계: allImages 상태 만들기

allImages 라는 어레이를 초기화합니다. 이 배열은 Firebase에서 검색된 모든 이미지 URL을 보유합니다.

 const [allImages, setImages] = useState([]);

2단계: getFromFirebase

Firebase에서 모든 파일 검색을 처리할 getFromFirebase라는 함수를 만들어 보겠습니다.

이 기능에서 우리는 다음을 원합니다.

1: 저장소 버킷에 대한 참조 가져오기

2: listAll()를 사용하여 내부의 모든 참조 개체를 가져옵니다

.
listAll()는 이미지 자체가 아니라 이미지에 대한 참조를 반환합니다. items 및 prefixes 2개의 속성이 있습니다. 저장소에 폴더가 중첩되어 있는 경우 항목은 이미지 참조이고 접두사는 폴더입니다.

다음은 저장소에 8개의 이미지가 있을 때 반환되는 내용listAll()의 예입니다.

3: 그런 다음 items가 있는 각 forEach() 참조를 반복하여 getDownloadURL()가 있는 이미지 URL을 얻습니다.

4: 마지막으로 이 URL을 allImages와 함께 setImages() 배열에 추가합니다.

  const getFromFirebase = () => {
    //1.
    let storageRef = storage.ref();
    //2.
    storageRef.listAll().then(function (res) {
        //3.
        res.items.forEach((imageRef) => {
          imageRef.getDownloadURL().then((url) => {
              //4.
              setImages((allImages) => [...allImages, url]);
          });
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  };

3단계: 이미지 표시

그런 다음 allImages 배열의 URL에서 이미지를 표시할 수 있는 구성 요소를 만들 수 있습니다.

 <div id="photos">
     {allImages.map((image) => {
        return (
           <div key={image} className="image">
              <img src={image} alt="" />
              <button onClick={() => deleteFromFirebase(image)}>
               Delete
              </button>
           </div>
         );
     })}
</div>

각 이미지에는 사용자가 클릭한 사진을 삭제할 수 있는 삭제 버튼이 있습니다. 버튼에 대해 deletedFromFirebase()를 구현하는 방법을 살펴보겠습니다.

Firebase에서 파일 삭제

4단계: deleteFromFirebase

deleteFromFirebase 함수는 이미지 URL을 인수로 받아 Firebase에서 해당 URL을 삭제합니다.

기능을 구현하는 방법은 다음과 같습니다.

refFromURL() 를 사용하여 삭제하려는 이미지의 Firebase 저장소에서 이미지 참조를 가져올 수 있습니다.

그런 다음 .delete()를 사용하여 Firebase에서 이미지를 삭제합니다.

마지막으로 allImages 배열에서 해당 URL을 제거합니다.

const deleteFromFirebase = (url) => {
    //1.
    let pictureRef = storage.refFromURL(url);
   //2.
    pictureRef.delete()
      .then(() => {
        //3.
        setImages(allImages.filter((image) => image !== url));
        alert("Picture is deleted successfully!");
      })
      .catch((err) => {
        console.log(err);
      });
  };

그리고 그 결과!

이것이 이미지를 업로드하고, 검색 및 표시하고, 삭제할 수 있는 방법입니다!

이 튜토리얼을 위해 만든 프로젝트를 보려면 저장소here를 방문하십시오. 자세한 내용은 Firebase Documentation을 참조하십시오.

읽어 주셔서 감사합니다. Firebase Cloud Storage 사용을 시작하는 데 도움이 되는 유용한 2부 읽기였기를 바랍니다. 언제나 그렇듯이 주저하지 말고 아래 의견에 의견을 보내주십시오. 다음 시간까지, 건배!