How to display image from firebase storage using javascript?

Question

I tried to upload an image to firebase storage and retrieve the image from firebase storage. But, the "retrieve" case is not working:

// image upload
var storageRef = firebase.storage().ref('profilePicturesOfAbmin/original/'+file.name);
storageRef.put(file);
function error(err) {
    console.log("error",err);
} 

// retrieve image from firebase storage
var storageRef = firebase.storage().ref();
var spaceRef = storageRef.child('profilePicturesOfAbmin/original/'+file.name);
storageRef.child('profilePicturesOfAbmin/original/'+file.name).getDownloadURL().then(function(url) {
    console.log("bsbdsbsdbd");
    var test = url;
    alert("hfdghjghj",url);
}).catch(function(error) { });

try to print out any errors. also if you run this code the .put() method will execute async. so when you try to download the file it might not be available yet — Christopher Rivera
– Christopher Rivera, Commented Apr 17, 2017 at 13:39
thanks @ChristopherRivera , i got an error from firebase .it is error r {code: "storage/object-not-found", message: "Firebase Storage: Object 'profilePicturesOfAbmin/original/download (3).jpg' does not exist.", serverResponse: "{↵ "error": {↵ "code": 404,↵ "message": "Not Found. Could not get object"↵ }↵}", name: "FirebaseError"} — ASWATHY
– ASWATHY, Commented Apr 18, 2017 at 4:19
As @ChristopherRivera mentioned, are you waiting for the file to finish uploading before trying to retrieve it? The error would suggest it does not exist in firebase yet. firebase.google.com/docs/storage/web/… describes how to add a handler to determine when the upload has completed — dpix
– dpix, Commented Apr 19, 2017 at 0:58

Christopher Rivera · Accepted Answer · 2017-04-19 11:01:26Z

1

So with seeing your error message the idea is todo

StorageRef.put(file, function(){
  // Now do the download
})

Or have a handler that waits till the file is uploaded

answered Apr 19, 2017 at 11:01

Christopher Rivera

4303 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ASWATHY Over a year ago

thank you @Christopher , i created a handler that wait for file upload and got download url

marc_s · Accepted Answer · 2018-08-05 19:49:57Z

You might want to try something like this...

var storageRef = firebase.storage().ref(filePath);

function uploadImage(event){
  var file = event.target.files[0];

  return storageRef.put(file).then(function(snapshot) {
    // put the file now do something...
    var fullPath = snapshot.metadata.fullPath;
    console.log(fullPath);
  }).catch(function(error){
    console.log("error uploading "+error);
  });
}

function retrieveImage(imageUri, imgElement){
  if (imageUri.startsWith('gs://')) {
    storageRef.refFromURL(imageUri).getMetadata().then(function(metadata) {
      imgElement.src = metadata.downloadURLs[0];
      console.log("URL is "+metadata.downloadURLs[0]);
    }).catch(function(error){
      console.log("error downloading "+error);
    });
  }
}

This will use Promise's to carry out actions once the file has been uploaded successfully.

It will also log to the console when error's occur.

cela · Accepted Answer · 2020-06-04 23:36:02Z

0

var storageRef = firebase.storage().ref('profilePicturesOfAbmin/original/')

storageRef.listAll().then(res => {
    //for folders
    res.perfixes.forEach(folder => {
        console.log(folder);
    });
    // for files NAME and URL
    res.items.forEach(item => {
        // console.log( item.name ); 
        item.getDownloadURL().then(function (url) {
            console.log(url);
        });
    });
})

edited Jun 4, 2020 at 23:36

cela

2,5203 gold badges26 silver badges46 bronze badges

answered Jun 4, 2020 at 15:39

Khalid Butt

1661 silver badge4 bronze badges

1 Comment

DanielCuadra Over a year ago

Hi @Khalid Butt, could you edit your answer and put a brief explanation of what is causing the issue in the OP, as well as what is the actual fix in your answer? That will help future visitors.

Collectives™ on Stack Overflow

How to display image from firebase storage using javascript?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related