upload file in firebase storage
<!DOCTYPE html>
<html>
<head>
<title>Firebase Web Basics</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,700" rel="stylesheet">
<script src="https://use.fontawesome.com/939e9dd52c.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="mainDiv" align="right">
<h1 align="left">Firebase File Upload</h1>
<progress id="uploader" value="0" max="100">0%</progress>
<input type="file" id="fileButton" value="upload"/>
</div>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "******************************",
authDomain: "******************************",
databaseURL: "******************************",
storageBucket: "******************************",
messagingSenderId: "******************************"
};
firebase.initializeApp(config);
//-------------------------------------
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref('img/'+file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
uploader.value = percentage;
}, function error(err) {
},function complete() {
});
});
</script>
<script src="fileup.js">
</script>
</body>
</html> <!DOCTYPE html><html><head><title>Firebase File Upload</title><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"/></head><body><div>Upload Files<br /><input type="file" id="files" multiple /><br /><br /><button id="send">Upload</button><p id="uploading"></p><progress value="0" max="100" id="progress"></progress></div><!-- The core Firebase JS SDK is always required and must be listed first --><script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script><!-- TODO: Add SDKs for Firebase products that you want to use --><script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-storage.js"></script><script>// Your web app's Firebase configurationvar firebaseConfig = { apiKey: "AIzaSyCd_rU4ft1CCdYZJCAjM8OyAVVfZ8I14LQ", authDomain: "file-upload-deae7.firebaseapp.com", databaseURL: "https://file-upload-deae7.firebaseio.com", projectId: "file-upload-deae7", storageBucket: "file-upload-deae7.appspot.com", messagingSenderId: "772980880174", appId: "1:772980880174:web:273969e0f628410853c0bf"};// Initialize Firebasefirebase.initializeApp(firebaseConfig);</script><script>var files = [];document.getElementById("files").addEventListener("change", function(e) { files = e.target.files; for (let i = 0; i < files.length; i++) { console.log(files[i]); }});document.getElementById("send").addEventListener("click", function() { //checks if files are selected if (files.length != 0) { //Loops through all the selected files for (let i = 0; i < files.length; i++) { //create a storage reference var storage = firebase.storage().ref(files[i].name); //upload file var upload = storage.put(files[i]); //update progress bar upload.on( "state_changed", function progress(snapshot) { var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; document.getElementById("progress").value = percentage; }, function error() { alert("error uploading file"); }, function complete() { document.getElementById( "uploading" ).innerHTML += `${files[i].name} upoaded <br />`; } ); } } else { alert("No file chosen"); }});function getFileUrl(filename) { //create a storage reference var storage = firebase.storage().ref(filename); //get file url storage .getDownloadURL() .then(function(url) { console.log(url); }) .catch(function(error) { console.log("error encountered"); });}</script></body></html> 
