Firebase Cloud Storageへの画像アップロードアプリを実装

画像をCloud Storageへアップロードできるwebアプリを作成していて、FirebaseのCloud storageの扱い方がなんとなくわかってきました。今回は、簡単な画像アップロードフォームを備忘録として紹介していきます。

 

Firebase Cloud storageとは

firebaseのサービスの1つで、画像などのファイルを保存しておくことができるクラウドストレージです。AWSでいうS3と同じようなサービスです。

 

index.htmlを作成

HTML5のfileフォームを作成していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>firebase Cloud Storage uploader</title>
 </head>
<body>
<h1>
     <a href="index.html">firebase Cloud Storage uploader</a>
</h1>
<div>
<!-- autocomplete="off"でformの候補をなくす -->
     <form autocomplete="off">
        <input type="file" id="setfile">
        <input type="submit" value="storageへ">
   </form>
   <div id="imgSample" style="width: 200px; height: 200px; background-size:100% auto; background-position : 50% 50%;"></div>
</div>

 <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-firestore.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-storage.js"></script>
 <script src="js/index.js"></script>
</body>
</html>

 

 

js/index.jsを作成

js/index.js にfirebase Cloud storageへの画像アップロード処理を書いていきます。

 

const configに自分のfirebaseアカウントの「webアプリに追加」のスクリプトを定義してください。

(() => {
// セキュリティチェック
'use strict';

// Initialize Firebase
const config = {
   apiKey: "",
   authDomain: "",
   databaseURL: "",
   projectId: "",
   storageBucket: "",
   messagingSenderId: ""
};
firebase.initializeApp(config);

// formインスタンスを定義
const form = document.querySelector('form');
// setfileインスタンスを作成
const setfile = document.getElementById("setfile");
// CloudStorageインスタンスを作成
const storage = firebase.storage();
// imgSampleインスタンスを作成
const imgSample = document.getElementById("imgSample");

// グローバル変数を定義
var file_name;
var blob;

// setfileの変更で処理開始(変更があった要素がeで返される)
setfile.addEventListener("change", e => {
var file = e.target.files;
// fileの名前を取得
file_name = file[0].name;
// blob形式に変換
blob = new Blob(file, { type: "image/jpeg" });
console.warn(blob);
});

// submitで処理開始
form.addEventListener('submit', e => {
// ページ遷移をなくす
e.preventDefault();

// storageのarea_imagesへの参照を定義
var uploadRef = storage.ref('images/').child(file_name);
uploadRef.put(blob).then(snapshot => {
console.log(snapshot.state);
// アップロードしたファイルのurlを取得
   uploadRef.getDownloadURL().then(url => {
    // htmlに表示する
       imgSample.style.backgroundImage = "url("+url+")";
   }).catch(error => {
      console.log(error);
   });
});
// valueリセットする
   file_name = '';
   blob = '';
});

})();

 

あとは、ブラウザで動作確認してアップロードできていたらOKです。

 

関連記事

以下の記事も合わせてどうぞ!

Firebase Firestoreを利用したユーザー認証のあるチャットアプリを実装する(1/2)
最近、firebaseのデータベースサービスであるfirestoreを利用してサービスを作っています。簡単なfirestoreの操作がわかってきたので、アプリをサンプルにメモします。 Firestoreを使用するにあたって Fi...
Firebase Cloud Firestoreに都道府県データベースをインポートする方法
Firebase Cloud Firestoreにデータをインポートする方法がわかったので備忘録として記事にしました。 今回は、Firebase Cloud Firestoreにデータを登録する方法を実際に都道府県データを登録して解説...