質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Storage+

Storage+は、IT業界団体CompTIA認定の資格で、ストレージに関する知識を証明します。ストレージの設計・構築~運用・管理までの知識を評価し、接続時のトラブルシューティングや基礎的なストレージ・システム管理のスキルを取得している証明になります。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

Firebase storage に関して複数の画像をアップしその画像のURLを取得するコードを完成させたい。

JK_Taro
JK_Taro

総合スコア13

Storage+

Storage+は、IT業界団体CompTIA認定の資格で、ストレージに関する知識を証明します。ストレージの設計・構築~運用・管理までの知識を評価し、接続時のトラブルシューティングや基礎的なストレージ・システム管理のスキルを取得している証明になります。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0回答

0評価

0クリップ

324閲覧

投稿2022/04/05 10:43

プログラムの流れとしては、
1、複数枚の画像をブラウザ経由でフォルダから選択

2、Storageにアップロードし画像のURLを取得

3、URLをfirestoreのドキュメントに保存

で一応作動するものを書きましたが、firebaseのドキュメントにある、
「listen for state changes, errors, completion」 の部分をどう自分のコードに落とし込んだら
良いのかわかりません。

まず自分のコードは(特に上に書いた流れの2番の部分に注目して書いてます)

upload複数枚の画像を一括でアップロードし保存先のURLを取得

function uploadImage(imageFiles, setProgress, postID, userID) {  //ファイルが空でないか if (imageFiles !== null) {    //タイムスタンプをファイル名につける let date = new Date(); let t = date.getTime(); let ts = Math.floor(t ); // timestamp const nameOfFile = postID + String(ts); //アップロードのプロミス集合体を作る let promises = []; promises = imageFiles.map((img, index) =>{ const imageRef = ref(storage, `${userID}/images/${nameOfFile + '-' + String(index)}`); return uploadBytesResumable(imageRef, img) .then((snapshot) => getDownloadURL(snapshot.ref)) .catch((error) => alert(error.code)); })       //実行して、終わったら取得したURLを配列としてドキュメントにセーブする Promise.all(promises) .then((mediaList) => {        //別に書いた関数を呼び出してfirestore のドキュメントにaddDocする saveToDoc(mediaList, 'test1', postID); }).catch((error) => alert(error.code));   }  } }

次にfirebaseの公式ドキュメントですが、単数アップロードのコードで、ここには上記コードまだ書けていない、.onでリッスンするアップロードの状態やエラーハンドルをするコードがあります。これを上記のコードに落とし込むにはどう記述すればいいのでしょうか?

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"; const storage = getStorage(); // Create the file metadata /** @type {any} */ const metadata = { contentType: 'image/jpeg' }; // Upload file and metadata to the object 'images/mountains.jpg' const storageRef = ref(storage, 'images/' + file.name); const uploadTask = uploadBytesResumable(storageRef, file, metadata); //////////////// // ※※※※※※※※※※※※※※※※※※※※※※※※※※※ここから※※※※※※※※ // Listen for state changes, errors, and completion of the upload. uploadTask.on('state_changed', (snapshot) => { // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log('Upload is ' + progress + '% done'); switch (snapshot.state) { case 'paused': console.log('Upload is paused'); break; case 'running': console.log('Upload is running'); break; } }, (error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors switch (error.code) { case 'storage/unauthorized': // User doesn't have permission to access the object break; case 'storage/canceled': // User canceled the upload break; // ... case 'storage/unknown': // Unknown error occurred, inspect error.serverResponse break; } //////////////// // ※※※※※※※※※※※※※※※※※※※※※※※ここまで※※※※※※※※※※※ }, () => { // Upload completed successfully, now we can get the download URL getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { console.log('File available at', downloadURL); }); } );

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Storage+

Storage+は、IT業界団体CompTIA認定の資格で、ストレージに関する知識を証明します。ストレージの設計・構築~運用・管理までの知識を評価し、接続時のトラブルシューティングや基礎的なストレージ・システム管理のスキルを取得している証明になります。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。