I want to let users upload profile pictures and I do this by using html file API.
Below is my code for uploading and showing the profile picture:
uploadPic.addEventListener('change',function(evt){
var file = this.files[0];
firebase.storage().ref().child(user_uid + "/" + file.name).put(file).then(function(){
console.log("uploaded to storage");
}).catch(function(e){
console.log(e.message);
});
firebase.storage().ref().child(user_uid + "/" + file.name).getDownloadURL().then(function(url){
user.updateProfile({photoURL: url}).then(function(){
console.log("change success");
}).catch(function(e){
console.log(e.message);
});
}).catch(function(e){
console.log(e.message);
});
});
/*profile pic*/
if(user.photoURL===null){
profilePic.src = "image/anonymous_big.png";
}else{
console.log(user.photoURL);
profilePic.src = user.photoURL;
}
Whenever the user changes the file it will upload to firebase storage then downloaded as URL and give the value to user.photoURL.
The picture was uploaded and downloaded successfully, however the profile picture looks like this:
the profile picture
If I console.log(user.photoURL) and click the url in console it shows the correct picture. I have no idea what went wrong. Thanks in advance.
