クラウドストレージ-管理ファイルのアップロード- FireBase基本シリーズ-パート9

以前の投稿では、ユーザーのファイルをクラウドストレージにアップロードしましたが、ファイルがアップロードされた後に何が起こるかについてはうまくいきませんでした.

スナップショットのアップロード

クラウドストレージにも使用されている他のすべてのfirebaseサービスと同様に、スナップショットを持っているので、どのように多くのデータがアップロードされているかを確認し、それが完了するといくつかの機能をトリガーするのに使用できます.

If you don't know what are snapshots then no problems, it's just
a fancy term to given to changes that occur in firebase.
Read previous posts.

スナップショットの購読

スナップショットを取得するには、まずfileRef.put()を変数に変更します.

var task = fileRef.put(file);

スナップショットを購読する変数に変更後、ファイルアップロードとして変更を行います.

    uploadTask.on('state_changed', 
        (snapshot) => {
            // Handle upload Progress 
        }, 

        (error) => {
            // Handle unsuccessful upload
        }, 

        () => {
            //Handle complete upload
        }
    );

関数を作成するには、同じ順序を使用します.

進歩

エラー

コンプリート

進捗バーの取得

我々はどのように多くのファイルを単に(snapshot.bytesTransferred / snapshot.totalBytes) * 100を使用してアップロードされるデータを取得することができますこれは、我々は簡単に進行状況バーのスタイルを変更することができます転送の割合を与える.

(snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    const upProgress = document.getElementById('upProgress');
    upProgress.style.width = progress + '%';
}

ファイルリンクの取得

ファイルを表示するには、ファイルにアクセスできるリンクを持つ必要があります.

() => {
        // Handle successful uploads on complete
        task.snapshot.ref.getDownloadURL().then((downloadURL) => {
            console.log('File available at', downloadURL);
        });
        }

次に

次の投稿では、これらのファイルデータをFirestoreデータベースに保存し、メインフィードに表示する方法を確認します

アレエベウル

18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things