FireBaseストレージを実装してWebアプリケーションにファイルを格納します.

こんにちはYall、これは最初のブログになるので、始めましょう.
私は反応WebアプリケーションでFireBaseストレージを実装するが、そのコンセプトは、バニラJavaScript、Vueを含む任意の技術で同じです.我々の良い古いjQueryと他のもの.

firebaseストレージへのイントロ
According to official docs of firebase:

Cloud Storage for Firebase lets you upload and share user generated content, such as images and video, which allows you to build rich media content into your apps. Your data is stored in a Google Cloud Storage bucket — an exabyte scale object storage solution with high availability and global redundancy.

簡単な言葉で
ファイルのアップロードや画像のアップロードをあなたのWebアプリケーション(例ではMern App)に組み込む場合は、1つの方法はFireBaseのクラウドストレージにファイルまたはイメージをアップロードし、アップロードされたイメージファイルのURLを収集し、データベースにそのURLを置くことです.

ユーザインタフェース:


最終コード
このブログの最後に完成したコードはこちらです.私は間違いなくあなたにコードのすべての行を説明するつもりです

//~~~ Logic for File Upload ~~~
import {
  uploadBytesResumable,
  getDownloadURL,
  ref,
  deleteObject,
} from "@firebase/storage";
import { storage } from "../Firebase";

function uploadTaskPromise(file) {
    return new Promise(function (resolve, reject) {
      if (!file) return;

      const storageRef = ref(storage, `img/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);

      uploadTask.on(
        "state_changed",
        (snapshot) => {
          const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          );
          console.log(prog);
        },
        (error) => {
          console.log("ERRRRR!!!!!!");
          alert("Error inside upload file function", error);
          reject();
        },
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            console.log("File available at", downloadURL);
            resolve(downloadURL);
          });
        }
      );
    });
  }

//~~~ Logic for Post request to backend ~~~

const postSubmitHandler = async (e) => {
    e.preventDefault();

    try {
      storageURL = await uploadTaskPromise(file);
      console.log("PROmisE REsOLVEd ANd got the urL AS", storageURL);

      const response = await fetch("http://localhost:5000/api/posts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
        body: JSON.stringify({
          location,
          description,
          price,
          contact,
          breed,
          creatorId: currentUser.id,
          image: storageURL,
        }),
      });
      console.log("REQUEST SENT");

    } catch (err) {
      const deleteImgRef = ref(storage, `img/${file.name}`);
      deleteObject(deleteImgRef)
        .then(() => {
          console.log("Something Went wrong, Image deleted successfully");
        })
        .catch((error) => {
          console.log("an error occured while deleting image", error);
        });
    }
  };

Firebase設定ファイルの作成
NPMとWebpackやRollupなどのモジュールバンドルを使用している場合は、以下のコマンドを実行して最新のSDKをインストールできます.npm install firebaseその後、FireBaseを初期化し、WebアプリケーションのSDKを使用して開始します.この場合、ストレージSDKを使用するだけです.
次のステップに進む前に、すでにFireBaseでプロジェクトを作成していることを想像しています.
FireBaseを初期化するには、まず新しいファイルを作成し、firebase.js . 次に、コードをベルローにコピーし、Firebaseにペーストします.あなたが作成したJSファイル.

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  //PASTE YOUR FIREBASE CONFIG HERE
};

const app = initializeApp(firebaseConfig);

const storage = getStorage(app);

export { storage, app };

今すぐFireBaseプロジェクトの左側のメニューの歯車ホイールのアイコンをクリックしてプロジェクトの設定を移動します.次にスクロールして、FirebaseConfig定数で何をしているかをコピーし、FireBaseConfig定数の中に貼り付けます.jsファイル.
今、我々はどこに我々のアプリでFireBaseストレージSDKを使用することができます.

アップロードファイル機能の作成
現在、我々は我々がポストをつくっているファイルに行きます.

import { uploadBytesResumable, ref} from "@firebase/storage";
import { storage } from "../Firebase";

function uploadTaskPromise(file) {
      if (!file) return;

      const storageRef = ref(storage, `img/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);
}

必要な依存関係をインポートします.
新しい関数を作成し、uploadTaskPromise を指定します.
今、ファイルをアップロードまたはダウンロードするには、ファイルを削除したり、メタデータを取得または更新するには、あなたが動作したいファイルへの参照を作成する必要があります.参照は、クラウド内のファイルへのポインタとして考えられる.参照は軽量ですので、必要に応じて作成することができますし、彼らはまた、複数の操作の再利用可能です.
一旦リファレンスが作成されるならば、我々は我々の参照と我々がパラメータとしてアップロードしたいファイルを渡すことによって、アップロードタスクを作成しますuploadBytesResumable .

ファイルのアップロード

import {
  uploadBytesResumable,
  getDownloadURL,
  ref,
  deleteObject,
} from "@firebase/storage";
import { storage } from "../Firebase";

function uploadTaskPromise(file) {
    return new Promise(function (resolve, reject) {
      if (!file) return;

      const storageRef = ref(storage, `img/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);

      uploadTask.on(
        "state_changed",
        (snapshot) => {
          const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          );
          console.log(prog);
        },
        (error) => {
          console.log("ERRRRR!!!!!!");
          alert("Error inside upload file function", error);
          reject();
        },
        () => {  getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            console.log("File available at", downloadURL);
            resolve(downloadURL);
          });
        }
      );
    });
  }

私たちのアップロードタスクを準備したら、クラウドストレージにファイルをアップロードする実際のロジックに移動できます.
アップロードタスクは.on 3つのオブザーバを登録するメソッドです.

'状態が変化したとき、状態は変化します

エラーオブザーバ

完成したオブザーバ

1 .最初のオブザーバーは、進捗、一時停止、再開などの状態変化イベントを観察します.また、アップロードされたバイト数と、アップロードされるバイト数を含めて、リアルタイムでアップロードされた合計割合を得ることができるタスクの進行状況を取得します.
2番目のオブザーバーは失敗したアップロードを処理します.このブロックでは、ファイルのアップロード中にエラーが発生する可能性があります.
3番目のオブザーバーと最も重要なオブザーバは完全にアップロードを成功させます.アップロードされたファイルのURLを抽出することで、ファイルのURLをデータベースに格納することができます.
クラウドストレージにファイルをアップロードするのは非同期タスクです.我々は、それが100に達するならば拒絶する新しい約束を返しますerror block またはsecond observer そして、アップロードの成功した完成に関してアップロードされたファイルURLを解決します.

ポストロジックをアップロードする
一旦我々が我々が我々のバックエンドにポストリクエストを送ることによって我々のデータベースにURLを保存するために論理に移ることができる準備ができているクラウドストレージへのファイルをアップロードするために、我々に論理を持つならば.
ポストボタンをクリックするたびに解凍されるPostSubmittlerという名前の新しい関数を作成します.そして、データをデータベースに保存して、ストレージにファイルをアップロードするのは非同期タスクであるので、我々は機能を非同期関数と宣言します.
まず最初に、最も重要なことは心に留めておくことですe.preventDefault() または他のページを再生するたびに我々は、ポストボタンをクリックし、我々のコードを爆破する.
次のことは、我々のロジックをラップすることですTry Catch 予防のその余分な層のためのブロック.
現在Try 我々が呼ぶブロックuploadTaskPromise そして、パラメータとしてアップロードする必要があるファイルを渡します.待っているキーワードを付けることを忘れないでください.今、アップロードタスクが成功した場合、約束は私たちのストアドファイルのURLで解決され、我々は定数storageUrl . アップロードが失敗した場合、約束を拒否し、エラーを処理できるcatchブロックにスローされます.
我々がURLを持っているので、我々がする必要があるすべては、我々のバックエンドにポストリクエストを送ることです.
最終的な考慮は、私たちがファイルをクラウドストレージに正常に保存するが、データベースにデータを格納することができない場合に起こることです.我々はまだキャッチブロックに投げられます、しかし、ダウンロードされたファイルは記憶域を浪費する以外に何もしないで、我々のクラウド記憶装置の中に残ります.
これを処理するには、削除したいファイルへの参照を生成することでストレージに保存したファイルを削除しなければなりません.ファイルをストレージにアップロードした際に生成した参照と同様です.
一度我々はそれから呼び出すことができます参照を持ってdeleteObject 我々はからインポート@firebase/storage にリファレンスを渡します.
これは、データベースにデータを格納している間に、何かがうまくいかない場合に保存したファイルを削除します.

あなたの時間をありがとう.
あなたが将来FireBase保管を使いたいならば、あなたがそれを参照するかもしれないように、ポストを保存してください.