First I initialized a Polymer app-drawer-template using the Polymer cli and then I added Firebase storage to the web app. Then I added file upload code to one of the pages (The code for the page is found below). However I am getting the following errors (This prevents files from being uploaded and also does not update the progress bar),
Uncaught TypeError: Cannot read property 'addEventListener' of null
and also
Uncaught TypeError: Cannot read property 'instanceCount' of undefined
This is my code.
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-market">
<template>
<style>
:host {
display: block;
padding: 10px;
}
paper-card.top{
margin-top: 8px;
width: 100%;
padding-bottom: 16px;
}
</style>
<paper-card heading="Welcome to the Market!">
<div class="card-content">
<h4>Upload a photo of your item</h4>
<!--uplod image-->
<input type="file" value="upload" id="fileUpload"/>
<progress value="0" max="100" id="uploader">0%</progress>
</div>
</paper-card>
</template>
<script>
//File upload script to Firebase storage
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileUpload');
//File selection listener
fileButton.addEventListener('change', function(a) {
//Get image
var file = a.target.files[0];
//create a storage reference
var storageRef = firebase.storage().ref('images/' + file.name);
//store the image
var task = storageRef.put(file);
//notify the user of upload status
task.on('state_changed',
function progress(snapshot) {
var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
uploader.value = percentage;
},
function error(err) {
},
function complete() {
}
);
});
</script>
<script>
Polymer({
is: 'my-market'
});
</script>
</dom-module>
I also tried to place the code for Firebase Storage in the tag of the index.html file but it's still not working. Any suggestions?
This is the fix.
Just put your script inside the Polymer({}); function.
Polymer({
is: 'my-market',
upld: function(a) {
//Get image
var file = a.target.files[0];
//create a storage reference
var storageRef = firebase.storage().ref('images/' + file.name);
//store the image
var task = storageRef.put(file);
}
});
And specify the on-change attribute to "upld" for the file input.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.