Menu
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() {
});
});
}
346
Drag and drop the desired files from your desktop or file manager to the main pane in the Google Cloud console. Click the Upload Files button, select the files you want to upload in the dialog that appears, and click Open.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
