CODEWITHSUNDEEP
javascriptfirebasereact-nativeexpofirebase-storage
Mike Haslam
Mike Haslam

Reputation: 171

Expo firebase 7.9.0 can't get downloadUrl

My method does manage to load the image from expo to firebase storage but I can't seem to get the download URL.

const uploadImage = async (uri) => {
const uniqid = () => Math.random().toString(36).substr(2, 9);
const ext = uri.split('.').pop(); // Extract image extension
const filename = `${uniqid()}.${ext}`; // Generate unique name
const response = await fetch(uri);
const blob = await response.blob();

var ref = firebase
  .storage()
  .ref()
  .child('images/' + filename);
ref.getDownloadURL().then((url) => console.log(url));
return ref.put(blob);

};

Here is the error I get

FirebaseStorageError {

"code_": "storage/object-not-found", "message_": "Firebase Storage: Object 'images/gebwu7tnh.jpg' does not exist.", "name_": "FirebaseError", "serverResponse_": "{ "error": { "code": 404, "message": "Not Found. Could not get object", "status": "GET_OBJECT" } }"

Upvotes: 1

Views: 523

Answers (1)

Mike Haslam
Mike Haslam

Reputation: 171

This is what I found that helped me from researching. I did refactor my firebase to use a higher order component. Here is my firebase method.

 uploadImageAsync: async (uri) => {
const uniqid = () => Math.random().toString(36).substr(2, 9);
const ext = uri.split('.').pop(); // Extract image extension
const filename = `${uniqid()}.${ext}`; // Generate unique name
const ref = firebase
  .storage()
  .ref()
  .child('images/' + filename);
const blob = await new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.onload = function () {
    resolve(xhr.response);
  };
  xhr.onerror = function (e) {
    console.log(e);
    reject(new TypeError('Network request failed'));
  };
  xhr.responseType = 'blob';
  xhr.open('GET', uri, true);
  xhr.send(null);
});

const snapshot = await ref.put(blob);

blob.close();
const imgUrl = await snapshot.ref.getDownloadURL();
console.log(imgUrl);
return imgUrl;

}, };

Here is how I implemented it in my component

 const setImage = async (uri) => {
try {
  return await firebase.uploadImageAsync(uri);
} catch (error) {
  console.log(error);
}

};

Upvotes: 1

Related Questions