I added the following function to my website. I am using Firebase Storage but for some reason it seems as if it is not working and I have no idea why.
When you upload a file the progress bar should show the progress of saving/uploading the file to Firebase Storage but that is not the case. Firebase has been initialized and I know it works.
I would greatly appreciate if someone could help me and tell me why the function is not working as described above and how to fix it.
function AddMed() {
var uploader = document.getElementById("uploader");
var fileButton = document.getElementById("fileButton");
var email = sessionStorage.getItem("email");
//Listen for file selection
fileButton.addEventListener('change', function (e) {
// Get File
var file = e.target.files[0];
//Create a storage ref
var storageRef = firebase.storage().ref('file/' + file.name);
/** folder name will be email,
Will have to transfer variable from page to page and files will be .jpeg**/
//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 complete() {
});
});
}
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth == null;
}
}
}<!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>