Firebase StorageにWEBからアップロードする

はじめて投稿させていただきます。よろしくお願いいたします！

今回扱うのはGoogleのmBaaS, Firebaseでの画像アップロードです。

※今回扱う内容は、あくまでＷＥＢ上の話なのであしからず。ただし、Cordova/Phonegapでも同様の方法でいけるはずです(というか使っています)。

動作環境

・GoogleChrome(バージョン58）
・jQuery2.x系

まず基本的な構成から

firebaseの初期設定（Config->initializeApp)については、省きます。
初期設定を読み込ませた後に、以下の内容を書き込みます。
ポイントは、storageの後ろの()を忘れないこと、そしてref()の中身はフルパスでのファイル名を入れるということです。
Ex)index.pngをiconに入れたい→refの中身は(icon/index.png)

index.js

var userName = file.name;
var storageRef = firebase.storage().ref(userName);
                    storageRef.put(file).then(function(snapshot) {
                      console.log('Uploaded a blob or file!');
                    });

##問題：fileをどのようにして読ませる？

ここまではいいのですが、初心者にとっては「画像を文字で持ってくる（ＢＬＯＢ）」という問題にぶつかって、その先の理解などは進みにくいものです。
ＭｙＳＱＬなどに入れる時は確かにＢＬＯＢ形式に入れることを意識しますが、Ｆｉｒｅａｓｅの場合は(HTML5のFile APIに任せることなく)直接代入すればアップロードができてしまいます。便利！
文字のエンコードをしなくてもOK！というだけみたいでした。

index.js

if (this.files.length > 0) {
                // 選択されたファイル情報を取得
                console.log(this.files.length);
                for(var i=0;i<this.files.length;i++){
                  var file = this.files[i];
                  // readerで、データURLとしてエンコード(BLOB)したファイルデータを作成(不要)
                  //var reader = new FileReader();
                  //reader.readAsDataURL(file);
//ここまで不要。まったくHTML5のFileAPI使ってません！
                    var userName = file.name;
                    var storageRef = firebase.storage().ref(userName);
                    storageRef.put(file).then(function(snapshot) {
                      console.log('Uploaded a blob or file!');
                    });
                }}

※上記のサンプルにある「 //reader.readAsDataURL(file);」が本来ＢＬＯＢ形式に書き換えるところなのですが、このような操作をしなくともアップロードできます。
※アップロードした後の画面はこんな感じになります。