how to add an image into Firestore

Question

How do you add an image into Firestore ? Is it the same thing as when you add any regular data into firestore or are you supposed to direct it a specific way to make it much feasible to fetch. I cannot seem to find any documentation that has to upload images into firestore.

I am currently using

        const image = document.getElementById('image')    

        database.collection("users").add({
          UsersImg: image
        })

Possible duplicate of [firestore database add image to record](https://stackoverflow.com/questions/49265931/firestore-database-add-image-to-record) — ordonezalex, Jan 18 '19 at 01:44

score 12 · Accepted Answer · answered Jan 18 '19 at 00:35

The code you're showing is attempting to store an HTML element reference in a document. That's certainly not what you want. The SDK isn't going to be smart enough to somehow convert that element to an actual image.

If you do have an actual image to store (and I mean the binary contents of a jpeg or png file, or similar), you can use Firestore's bytes type to start raw binary data. But that's not really a good idea, since there is a limit of 1MB for each document. An image could easily exceed that. Firestore is not a good tool to store large amount of binary data.

It would probably be better to store the image in Cloud Storage, then store the path to that image in Firestore so you can search for it and download it later.

so it must always has 2 calls: first is up upload, get the url; 2nd is to use that url to save to firestore. Can it be achieved in 1 server call? — VHanded, Dec 08 '19 at 07:36

how to add an image into Firestore

1 Answers1