[firebase/javascript] 選択したファイルをstorageにアップロードする方法

javascriptで選択したファイルをstorageにアップロードする方法は以下の通り

<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<script>
 // Initialize Firebase
 var config = {
 apiKey: "apiKey",
 authDomain: "authDomain",
 databaseURL: "databaseURL",
 projectId: "projectId",
 storageBucket: "storageBucket",
 messagingSenderId: "messagingSenderId"
 };
 firebase.initializeApp(config);


$(function() {
 $('#inputFile').on("change", function() {
 var file = this.files[0];
 if(file != null) {
 console.log(file.name); // ファイル名をログに出力する
 if (this.files.length > 0) {
 // 選択されたファイル情報を取得
 console.log(this.files.length);
 for(var i=0;i<this.files.length;i++){
 var file = this.files[i];
 var userName = file.name;

 // Create a root reference
 var storageRef = firebase.storage().ref();

 // Create a reference to image file
 var ImagesRef = storageRef.child('imagefolder/'+userName);

 ImagesRef.put(file).then(function(snapshot) {
  console.log('Uploaded a blob or file!');
  ImagesRef.getDownloadURL().then(url => {
   console.log('imageurl:'+url);
  })
 });
 }}
 }
 });
 });
</script>

上記コードでは、inputFileのIDを持つファイル選択ボタンを押して、アップロードするファイルを選択した瞬間にimagefolderフォルダにデータがアップロードされ、アップロードが成功すると公開用URLをログに出力する

またHTMLのBody部分に下記コードを追加しておくこと

<input type="file" id="inputFile">