Firebase storage add file reference to firestore

Question

I am trying to get a form upload working to upload data to my Firestore db as well as upload an image to my firebase storage.

Individually I can do both, however outside of storing the exact URL of the uploaded image I can't seem to figure out how to programatically store the Reference to the image in my firestore.

In the console I can set the type to "Reference"

But whatever I try programatically doesn't work:

Post image upload:

const url = await storageRef.snapshot.ref.getDownloadURL()
let imageRef = storage.ref().child(`test/${this.imageData.filename}`).ref
// let imageRef = storageRef.snapshot.ref
// let imageRef = storage.ref(`test/${this.imageData.name}`)

const docRef = await testImagesCollection.add({
   thumbnail: imageRef,
   dateCreated: firestore.FieldValue.serverTimestamp()
})

alert("upload succeeded", docRef.id)

I usually end up with: FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Reference object (found in field thumbnail)

If I have to I'll just store the URL but I rather not do that, if the console allows me to set a reference I should be able to do it programatically as well?!

Answer 1

Firestore reference types only work with references to other documents represented as DocumentReference objects. They don't work with references to objects in Cloud Storage. If you want to store a reference to an object in Cloud Storage, you should either store the path to the file in the bucket (as a string, not as a Reference object), or a download URL (whichever is more convenient for you).

If you have a Reference object, you can get a string path to it with its fullPath property.