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

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.

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.

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.

Related

Tagging images used for search bar

I'm working with a classmate to build some kind of politicaly-related memes database where users will have the ability to tag images with hashtags, using Meteor. The purpose of this, beyond data collection, is to provide a powerful search engine, where one can find memes with keywords (let's say, for i.e., with the keywords "ukraine" and/or "poutine", you'll find memes related to theses topics) that matches the hashtags.
We have to build everything from scratch, and I'm wondering if someone here have an idea where to start. In other words :
What is the easiest way to host images with Meteor ? Is it through MangoDB ?
Is it possible to change the metadata of the images in the client side ? Do we need to grant this ability using javascript only (or is there also json in it) ?
If we can manage the two first parts, is there a way to link the metadata (the hashtags in that case) with the search engine in order to retrieve the images ?
Thank you for inputs !
It's not easiest but I would store images in Google Cloud Storage or Amazon S3
I would store image metadata in mongodb database. You can update the database from client side by calling Meteor Methods
When users search for images by entering keywords or link with keywords, you can query the database then return the related images.

Counting unique post view by uid

I am trying to build a mobile app which has a NewsBulletin feature using a NoSQL Cloud Firestore. I am trying to get the unique post view by keeping the user's uid into an array called "views" and count it by getting the length of the array. Is this recommendable or are there other better solution for this? Thank you
Currently this is the structure of my database:
News(Collection)
-DummyNews1(Document)
-newsTitle
-posterName
-bodyMessage
-timeCreated
-views(array)
-dummyuid1
-dummyuid2
I like your solution as it is easy to implement. You don't actually have to manually check for duplicate uids, as firestore has a built in feature that does that for you.
Here is an example:
FirebaseFirestore.instance.collection('news').doc('documentId').update({
'views': FieldValue.arrayUnion([viewerUid]),
});
FieldValue.arrayUnion will check if the contents exists in the database, and only when it does not will add the content.
Now, although I am a fan of you solution, and I do use this method for like type of feature in my own published apps, there are some limitations that you should be aware in case your app becomes super popular.
Maximum document size in firestore is 1MiB. Since firebase auth's uid is 28 characters long, that would be about 37,400 views maximum to be stored in a document ignoring other fields.
But if this is a new application, I would not worry too much about this limit. Besides, once you get close to this limit, you should have more than enough resources to pivot to another method that scales.

Creating a Firestore Database from existing files

I have a few music albums - basically just files in folders - that I want to upload to Firebase Storage.
One would usually run a function after a file has been uploaded to create a Document containing the metadata about the Song but that's where Im stuck.
I can get most infos I need by reading the Tracks ID3 Tags but in a NoSql Database I think im supposed to not only create a Document for the Track but also a Document for each album with an array of all tracks - or at least an array with all track ids.
But when or how do I create the Album Document? Another example is the Album Cover.. I want to save the Url inside the Track Document as well as in the corresponding Album but that means that the Artwork is the first thing I need to upload because I can't add an URL because it doesn't exist yet.
I feel like I have to get this right before I start because updating everything afterwards is a pain.
Is using upload functions really the way to go here or is there really a tool or another way im missing.
thank you very much
You mentioned Firebase Storage wich is a just a cover for Cloud Storage and it's a obejct managment system not a Database, however I think you are refering to Firebase Firestore.
On firestore since as you mentioned is a NoSQL DB and the schema structure your Db should have, There no correct way to do this and will defitetly depend on each specific use case. However you can take a look at this docs where it's expalined how to arquitecture your schema thinking from a SQL to a NoSQL format.
Among other information the main pointsa are:
In general, you can treat documents as lightweight JSON records
You have complete freedom over what fields you put in each document
After you create the first document in a collection, the collection exists. If you delete all of the documents in a collection, it no longer exists.
You can use sub collections inside of collections
Deleting a document does not delete its subcollections!
And finally to have an idea on how to structure the information, you can take a look at this repo where "NoSQL-Spotify by Luke Halley" explains a NoSQL schema based on spotify so I think it shoudl fit your need or at least give you a starting point.

How Can I Quickly Populate a Firestore DB?

I'm setting up a Firestore database and am playing around with structuring it. Is there a way to populate and change it quickly without having to add/change fields manually every single time?
Two example things I am looking to do are:
1) Populate collections with documents that have predetermined fields. Currently I have to add the fields manually every single time.
2) Edit the fields en masse for all documents within a collection (e.g. change the name of a field, delete a field entirely, add a new field)
The Firebase console doesn't seem to provide these tools, would my best bet be to write a separate app specifically for this purpose?
Since such bulk uploads and bulk edits are not part of the console, you'll have to build something yourself indeed.
A good place to start would be the Cloud Firestore API, which allows adding and updating documents in the database.

Firebase: Search in storage using comodin

I'm having a problem trying to search images in my storage instance because I have the following structure:
/cityx/cars/{userId}/{numberPlate}/image_1
/cityx/cars/{userId}/{numberPlate}/image_2
/cityx/cars/{userId}/{numberPlate}/image_3
Each user have it's own folder {userId} and within that folder, has registered many cars indexed by the {numberPlate} and finally inside that {numberPlate} folder exists pictures related to the user so I'm performing a search by the numberPlate but the issue I have is related to.. how to search it having the parent folder with a dynamically name (the userId).
Do you know how to perform a search like that?
Kind regards!
The Firebase Storage API doesn't have the ability to search for images. You must know the full path already to find/load an image.
So if you want to be able to search for specific images, you should store the metadata about the images elsewhere. One common place for structured metadata would be the Firebase Database, such as covered here: How to get an array with all pictures?
If you want more wildcard-like search, you'll want to look into integrating an external search engine, such as Elastic Search.

Resources