CODEWITHSUNDEEP
reactjsfirebasereact-nativeblobreact-native-firebase
Olivia
Olivia

Reputation: 2161

Uploaded Image Blob To Firebase - Missing Next Steps

I have an array of blobs of local images saved in my DB. It looks like this: 

[{"_data":{"blobId":"C4B1459C-4444-436D-836A-9F9CA63B925F","name":"C6DC696D-5555-4204-B8EC-F8F071D1FC15.jpg","offset":0,"size":586074,"type":"image/jpeg"}},{"_data":{"blobId":"5EFDAD62-9ACD-2222-AEBE-DF9DDD938A7B","name":"46FE26E3-6666-4DED-9657-C471231A800D.jpg","offset":0,"size":247568,"type":"image/jpeg"}},{"_data":{"blobId":"8423EF1B-F960-1111-A503-487A448FC895","name":"E2E2456C-9999-4A3C-B3FD-56D38FE0DDAE.jpg","offset":0,"size":407174,"type":"image/jpeg"}}]

I am saving the array to Firestore and want to pull the blob down when the user logs in and display the photo. I understand that at some point I need to use downloadableURL() but I do not see anywhere in the FB documentation stating that I have to upload the blob as a URL. I just know I have to get the blob into FB, which I have done. Can anyone point me in the right direction of next steps to get the URL either before I upload to FB or when the user logs in/ initial state is loaded?

https://firebase.google.com/docs/storage/web/upload-files

Firebase Images Table

Preparing data to push to firebase:

const imagesBlob = [];
for(ud in userData.images){
  var response = await uriToBlob(userData.images[ud]); //method turns the file:// into a blob
  imagesBlob.push(response);
}
const newBlobObject = imagesBlob.map((obj)=> {return Object.assign({}, obj)}); //I push this value to the DB

Pulling data down to state: the blob is included in the doc.data()

grabUserData = async (userId) => {
var db = firebase.firestore();
var docRef = db.collection("Users").doc(userId);
return docRef.get().then(function(doc) {
  if (doc.exists) {
      console.log("Document data:", doc.data());
      return doc.data();;
  } else {
      console.log("No such document!");
  }
})
};

I am using Firebase, React Native, and Expo

Upvotes: 0

Views: 2091

Answers (1)

Kelok Chan
Kelok Chan

Reputation: 756

Try using Firebase Storage to store the blob in a correct place while getting a downloadableUrl

const uploadFile = async = (blob) => {
    const ref = await firebase
      .storage()
      .ref('chatRoomFiles/123')
      .put(blob);

    const url = ref.getDownloadURL();

return url; // <-- Url that returns your uploaded image

}

Upvotes: 2

Related Questions