web-dev-qa-db-ja.com

Firebase Storageに画像を保存し、Firebase Cloud Firestore（Beta）にメタデータを保存します

Firebase Storageに画像をアップロードし、特定のメタデータをFirebase Cloudに保存しようとしています。 JavaScriptでコーディングしています。

目標は、たとえばユーザーが入力する必要があるテキスト入力フィールドから、カスタマイズされたメタデータをFirebase Cloudに設定することです。

Firebase Storageに画像を保存する方法は次のとおりです。

storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) {
        console.log('Uploaded', snapshot.totalBytes, 'bytes.');
        console.log(snapshot.metadata);
        var url = snapshot.downloadURL;
        console.log('File available at', url);
        // [START_EXCLUDE]
        document.getElementById('linkbox').innerHTML = '<a href="' +  url + '">Click For File</a>';
        // [END_EXCLUDE]
      }).catch(function(error) {
        // [START onfailure]
        console.error('Upload failed:', error);
        // [END onfailure]
      });
      // [END oncomplete]
    }

アップロード機能にメタデータをFirebase Cloudに書き込む別のタスクを統合する方法がわかりません。どんな助けも感謝します！

@eykjs @Sam Storie：ご協力ありがとうございます。コードを変更しました。今のところ、私が理解できないエラーがあります。エラー：TypeError：undefinedはオブジェクトではありません（「selectedFile.name」を評価）

私のコード：

var selectedFile;

function handleFileSelect(event) {
        //$(".upload-group").show();
        selectedFile = event.target.files[0];
};

function confirmUpload() {
        var metadata = {
                contentType: 'image',
                customMetadata: {
                        'dogType': 'Lab',
                        'title': $("#imgTitle").val(),
                        'caption': $("#imgDesc").val()
                },
        };
        var uploadTask = firebase.storage().ref().child('dogImages/' + selectedFile.name).put(selectedFile, metadata);
                uploadTask.on('state_changed', function(snapshot){
                
        }, function(error) {
        
        } );

}

SelectedFile定義の何が問題になっていますか？助けてくれてありがとう。

javascriptfirebasemetadatafirebase-storagegoogle-cloud-firestore
11
peachmeier

たぶん、アップロードが完了したら、データをFirestoreにアップロードできます。

storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) {
console.log('Uploaded', snapshot.totalBytes, 'bytes.');

let db = firebase.firestore();
let dbRef = db.collection("images").doc(file.name);

let setData = dbRef.set({
    //yourdata here
    downloadURl: snapshot.downloadURL
}).then( () => {
    console.log("Data stored in Firestore!");
});

// your actions
7
Eyk Rehbein

Firebaseの機能を使用してこれを簡単に行う必要があることを理解した場合：

https://firebase.google.com/docs/storage/extend-with-functions

ストレージ内の何かが変更されたときに関数をトリガーできるため、リアルタイムデータベースまたは新しいFirestoreデータベースにデータを簡単に書き込むことができます。

これがどのように見えるかを見るために私が参照したページからの簡単なスニペットです：

exports.generateThumbnail = functions.storage.object().onChange(event => {
  // ...
});
1
Sam Storie

ソース リンク

Firestoreに画像をアップロードし、メタ情報を保存するCloud Storage

enter image description here

import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { finalize, tap } from 'rxjs/operators';

...
...
...

// The main task
this.task = this.storage.upload(path, file, { customMetadata });

// Get file progress percentage
this.percentage = this.task.percentageChanges();
this.snapshot = this.task.snapshotChanges().pipe(

  finalize(() => {
    // Get uploaded file storage path
    this.UploadedFileURL = fileRef.getDownloadURL();

    this.UploadedFileURL.subscribe(resp=>{
      this.addImagetoDB({
        name: file.name,
        filepath: resp,
        size: this.fileSize
      });
      this.isUploading = false;
      this.isUploaded = true;
    },error=>{
      console.error(error);
    })
  }),
  tap(snap => {
      this.fileSize = snap.totalBytes;
  })
)
0
Code Spy