[TIL] Firebase Storage에 json 파일 업로드, 다운로드하기

이번에 Expo 로 앱을 개발하던 중 Firebase Storage 에 json 파일을 올리고 다운로드 받는 작업을 진행하게 되었습니다.
따라서 해당부분을 복습/공유차원에서 코드를 남깁니다.

Firebase Storage 예시는 백업/복원 시나리오입니다.

1. Backup

업로드 하는 부분은 간단합니다.
Json 을 Stringify로 직렬화 한 뒤, Blob 객체로 변환 후 put 하면 끝!
ref()에 작성된 path가 storage에 미리 존재하지 않아도 바로 생성됩니다.

  const doBackup = () => {
    const backupData = { a: 1 };
    
    let storageRef = Firebase.storage().ref(
      `users/${loginedUser.id}/backupFile.json`
    );

    const jsonString = JSON.stringify(backupData);
    const blob = new Blob([jsonString], { type: "application/json" });
    storageRef.put(blob).then(() => {
      console.log("success upload backup");
    });
  };

2. Restore

Blob 파일을 만들 땐 쉬웠지만 읽을땐 살짝 복잡합니다.
FileReader 라는 객체를 써서 읽습니다.
이 객체에 파일을 읽을 콜백함수를 먼저 넣어둡니다.

이후 firebase storage에게 getDownloadURL() 을 호출하면
바로 파일을 받는게 아니라, 파일을 다운로드 받을 수 있는 url이 반환됩니다.
그러면 해당 url을 GET 호출해서 blob 파일을 다운로드 받습니다.

그 뒤 FileReader에게 얻은 파일을 readAsText()로 보내면,
FileReader의 콜백함수를 통해 파일을 사용할 수 있습니다.
직렬화 되어있는 상태니, parse를 해야겠죠.

  const doRestore = () => {
    //Read Blob File 
    const fr = new FileReader();
    fr.addEventListener("load", (e) => {
      const restored = JSON.parse(fr.result);
      console.log(restored) //{ a: 1 }
    });

    let storageRef = Firebase.storage().ref(
      `users/${loginedUser.id}/backupFile.json`
    );

    storageRef
      .getDownloadURL()
      .then(function (url) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = "blob";
        xhr.onload = function (event) {
          var blob = xhr.response;
          fr.readAsText(blob);
        };
        xhr.open("GET", url);
        xhr.send();

      })
      .catch(function (error) {
        // Handle any errors
      });

  };