[javascript] FirebaseStorageにローカルファイルをアップロードする

FirebaseStorageにローカルファイルをアップロードする

Googleが提供するリアルタイムDBサービスのStorageにWEBサーバ上にあるローカルファイルをアップロードしたい場合はjavascriptAPIを組み合わせてアップロードすることができる

Firebaseルール

Storageのルールを以下のように変更

match /image/{imageID} {
 allow write: if request.resource.contentType.matches('image/png')
 }
match /{allPaths=**} {
 allow read, write: if request.auth != null;
}

上記ルールではimageフォルダにpngファイルのみをアップロードでき、その他のフォルダには認証ユーザでないとアップロードできないようにした。

test.htmlもしくはtest.php

  
    Firebase Storage

    
    
    
    
    

    
    
    
    
    
    

  
    

 

APIキー取得

OverViewのアプリ追加でWEBを選択

APIキーが表示されるのでコピー

firabaseStorage.js

(function() { 
  //先程のAPIキーを貼り付け
  var config = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxx"
  };
  
  firebase.initializeApp(config);
  
  log('Upload is started');
    
  var storage = firebase.storage();
  var storageRef = firebase.storage().ref();
  var imagesRef = storageRef.child('image'); //FirebaseStorageのimageフォルダを指定
 
  var xhr = new XMLHttpRequest();
  xhr.open("GET", filePath, true);
  xhr.responseType = "arraybuffer";
 
  xhr.onreadystatechange = function(oEvent) {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var file = new Blob([xhr.response], {type: "image/png"});
            var uploadTask = storageRef.child('image/image.png').put(file);

            uploadTask.on('state_changed', function(snapshot){
              log('state_changed');
            }, function(error) {
              log(error);
            }, function() {
                var downloadURL = uploadTask.snapshot.downloadURL;
                log(downloadURL);
                //その他処理.....
            });
        };
    };
  };
 
  xhr.send();

  

  /*************/
  /*  HELPERS  */
  /*************/
  /* Logs to the page instead of the console */
  function log(message) {
    var childDiv = document.createElement("div");
    var textNode = document.createTextNode(message);
    childDiv.appendChild(textNode);
    document.getElementById("log").appendChild(childDiv);
  }
})();

JavascriptからFirebaseStorageにアップロードする形式はBlobもしくはFileAPI型しか対応していないため、ローカルファイルを一度Blobに変換している

あとは
var uploadTask = storageRef.child(‘image/image.png’).put(file);
でファイルをアップロード開始し、

uploadTask.onで状態を監視している

ローカルファイルをXMLHttpRequestでGETしているが、XMLHttpRequestのreadyStateが「４」且つ、statusが２００の場合のみBlob変換を開始するようにしている。

XMLHttpRequestのreadyState一覧

XMLHttpRequestのreadyStateの番号は以下の通り
４が正常終了

値	定数	状態
0	UNSENT	XHRオブジェクトの作成直後
1	OPENED	open()メソッドの呼び出し後
2	HEADERS_RECEIVED	レスポンスヘッダの受信後
3	LOADING	レスポンスボディを受信中（繰り返し実行される）
4	DONE	XHR通信の完了後

XMLHttpRequestのstatusが０の場合

XMLHttpRequestのstatusが０と表示されるが、こちらはローカルファイルをローカルパスでアクセスした際に表示される、２００と表示したい場合はローカルファイルへHTTPの外部ドメイン経由で取得すると良い。

ファイルが存在しない場合は「４０４」