I am simply trying to test uploading images and I want to display the image, that is uploadoaded. My code looks like this:
function uploadFile(files){
const storageRef = firebase.storage().ref(); //this references the firebase storage
const horseRef = storageRef.child("horse.jpg");
const file = files.item(0); //will return a list so lets take the first item
const task = horseRef.put(file); //to upload the file we call the put file
console.log(task);
task.then(snapshot => { //returns a buncha data including a snapshot url
const url = snapshot.downloadURL
document.getElementById("upload").setAttribute("src", url)
});
}
But the snapshot.downloadURL is giving back an undefined. Can you help me?
There isn't any downloadURL property on the snapshot which is an UploadTaskSnapshot. You need to use getDownloadURL() method on the storage reference to get the URL. Try refactoring the code as shown below:
task.then(async (snapshot) => {
const url = await snapshot.ref.getDownloadUrl()
document.getElementById("upload").setAttribute("src", url)
});