How do I reference an image from storage in cloud firestore? React

Question

I'm so confused.

I have a form with an input field where you put in a 'title' and an upload file where you upload an 'image'. I created a doc in Cloud Firestore so these are my two fields.

Now, when I upload an image, it gets saved in Storage but I want the image to know to which title it belongs so from what I understand, I need to reference the doc in Cloud Firestore. I don't have any users so I cannot use a uid. I figured that I somehow need the 'access token' from storage, to get saved in the field 'image' in Cloud Firestore. How do I do that?

I'm a beginner so please be as specific as possible!

It's a react app.

Answer 1

You can simply take the string path of the image in Cloud Storage, and store that in the field of a document.

If you have a Reference to a file you just uploaded to Storage, you can use its fullPath property to save it to Firestore and locate it later. You can use the method Storage.ref(fullPath) to rebuild that Reference after you read the string back from the document.

Answer 2

I am having trouble understanding the context of the question, but it seems like there might be some confusion between Real-Time Database, Firestore, and Firebase Storage services (understandable). You may want to use these in concert with one another. I.e. Storage contains your image, but you can create a database meta-data entry for the image, which can link it to a user or menu item or whatever.

Just as you need specific answers, we need specific questions. A statement like, "I want the image to know to which title it belongs," is not accurate to the intended communication purpose. Images don't know anything or have any sense of belonging. I have struggled with this problem a lot myself (in Vue) and I appreciate that it can be difficult to get a straight answer out of the Firebase documentation at present for version 9 web development, but if you follow the guide for accessing data from storage, you should eventually be able to import the "storage" object in React, use the getDownloadURL() function to get an authenticated download url (this is probably the "token" business you are hinting at), and then just treat that image url as if it were any image link.