複数のファイルをFirebaseにアップロードするには？

Question

Firebaseストレージに複数のファイルをアップロードする方法はありますか？次のように、1回の試行で1つのファイルをアップロードできます。

fileButton.addEventListener('change', function(e){ 
//Get file 
var file = e.target.files[0]; 

//Create storage reference 
var storageRef = firebase.storage().ref(DirectryPath+"/"+file.name); 

//Upload file 
var task = storageRef.put(file); 

//Update progress bar 
    task.on('state_changed', 
    function progress(snapshot){ 

     var percentage = snapshot.bytesTransferred/snapshot.totalBytes * 100; 
     uploader.value = percentage; 
    }, 
    function error(err){ 

    }, 
    function complete(){ 
     var downloadURL = task.snapshot.downloadURL; 

    } 
); 

}); 

複数のファイルをFirebaseストレージにアップロードする方法。

Answer 1

私は上記の質問の解決策を見つけました。誰にでも役立つので、ここに載せたいと思います。

//Listen for file selection 
fileButton.addEventListener('change', function(e){ 
    //Get files 
    for (var i = 0; i < e.target.files.length; i++) { 
     var imageFile = e.target.files[i]; 

     uploadImageAsPromise(imageFile); 
    } 
}); 

//Handle waiting to upload each file using promise 
function uploadImageAsPromise (imageFile) { 
    return new Promise(function (resolve, reject) { 
     var storageRef = firebase.storage().ref(fullDirectory+"/"+imageFile.name); 

     //Upload file 
     var task = storageRef.put(imageFile); 

     //Update progress bar 
     task.on('state_changed', 
      function progress(snapshot){ 
       var percentage = snapshot.bytesTransferred/snapshot.totalBytes * 100; 
       uploader.value = percentage; 
      }, 
      function error(err){ 

      }, 
      function complete(){ 
       var downloadURL = task.snapshot.downloadURL; 
      } 
     ); 
    }); 
} 

Answer 2

私は簡単な解決策があると信じている：

// set it up 
firebase.storage().ref().constructor.prototype.putFiles = function(files) { 
    var ref = this; 
    return Promise.all(files.map(function(file) { 
    return ref.child(file.name).put(file); 
    })); 
} 

// use it! 
firebase.storage().ref().putFiles(files).then(function(metadatas) { 
    // Get an array of file metadata 
}).catch(function(error) { 
    // If any task fails, handle this 
}); 

Answer 3

Firebaseストレージプロミスを使用していますので、あなたはそれを達成するための約束を使用することができます。

は、ここでこのテーマをカバーしていfirebaseブログ記事です： Keeping our Promises (and Callbacks)

---

Promise.all（） "の約束のアレイ"

Promise.all(
    // Array of "Promises" 
    myItems.map(item => putStorageItem(item)) 
) 
.then((url) => { 
    console.log(`All success`) 
}) 
.catch((error) => { 
    console.log(`Some failed: `, error.message) 
}); 

アップロード各ファイルを与えると約束を返す

putStorageItem(item) { 
    // the return value will be a Promise 
    return firebase.storage().ref("YourPath").put("YourFile") 
    .then((snapshot) => { 
    console.log('One success:', item) 
    }).catch((error) => { 
    console.log('One failed:', item, error.message) 
    }); 
} 

YourPath​​は、myItemsアレイ（したがって、itemオブジェクト）と共に搬送することができる。

わかりやすくするためにここでは省略しましたが、あなたはその概念を得ています。