I have a rich text component in my form and can add text, images, video etc. Everything gets saved in one field in Cloud Firestore. When I include images with the text, they come up as src="...." in between the text which is fine. But what does this mean? Do the images get stored into Cloud Firestore? I know you're not supposed to do that. Is Firebase going to charge me in the future if I have a lot of images/videos etc?
As the images get passed as part of the 'content' field that can include text, you can't separate them and store them in storage. At least I don't think so.
I guess what I'm asking is, is this ok? Am I going to have any issues in the future in terms of how many images the db can handle or being charged for it? I just don't understand where the images are being saved.
What you have in your screenshot is a base64 encoded image. So all the data for the image is encoded in the URL itself.
This is not uncommon for smaller images, as it saves the browser from having to make another request to get the image. And as long as your total document size remains under the 1MB limit that Firestore has, it is in itself fine.
If you see this regularly and the images are non-trivial, you might want to see if you can extract the binary data and store it in Cloud Storage. One reason for that is cost control: on Firestore you pay $0.18/GiB, while on Storage that is $0.026/GB (as per the Firebase pricing page).
Related
Hei!
I have a quiz app that shows a list of active games. This list also shows the opponents profile image. The list is a stream from firestore.
Everytime the user changes to another screen and back to the gamelist the images are downloaded again..this uses alot of network traffic.
I cant put the images in cache when the app starts as i dont know what games the player have, and they are changing. Is there a way to get the image from url , put it in cache, and IF its in cache , use that image..in the same widget?
I believe cached_network_image package is what you need.
When utilising Firebase Storage to store imagery, for example, user avatars, is there a way that you can request a smaller, thumbnail sized serving of the image?
I have searched Google and documentation and I have been unable to come up with a result. Currently my app utilising Firebase Storage URLs experiences a minor delay prior to loading images due to the fact that it I am requesting large images to fill tiny avatars.
Is there a resource I am overlooking that specifies the available parameters for this URL? (of which token & alt are two I'm aware of).
Thank you for the assistance in advance.
Auto-resizing images upon read is not a feature of Firebase Storage. The typical solution is to create variants of the images during upload, for example through the Resize Images extension.
I'm creating sort of a tutorial application and have to display images from firebase storage with a step-by-step tutorial. Currently I'm using the .getDownloadUrl function and am displaying the images using Cached Network Images(External library) with the URL. The images are replaced when the step is completed and it takes at least 2-3 seconds to load an image and can get quite irritating for a user. Also, to minimize latency I shifted the Cloud Storage location nearby to where a user would be, this improved the speed slightly. Is there a better way to display images, apart from storing the links on Cloud Firestore or saving all the URLs in one list at the start.
The most common approach is to compress/resize (or both) your images. By doing this you have a few options:
1. You can display the thumbnail by default and only load the full image (or load it in the background) when the user requests it (eg. they click on details about the tutorial)
2. Load a different version of the image depending on the screen size (you don't need to display an image meant for desktop on a mobile device)
3. Replace the old image with the compressed one. Depending on what the content is, you probably don't need images larger than 200kb, and that's being generous.
You could also consider storing your images using a next gen format, such as WebP as it is considered one of the most efficient image types. But, it's not yet supported on all devices, so you'd want to include a fallback type.
You said you're caching the images which is a good step to reduce load times. You also said you shifted the storage location to be closer to the users. You could also try to find a CDN that is even closer to your user's locations (probably diminishing returns).
You seem to be against storing the downloadUrls in your database. This would help as all you'd have to do is load the image, instead of ping the bucket for the url and then load it.
Another potential solution for your use case could be to download the images for this tutorial, as well as the next one so when the user clicks next the images are already downloaded.
Unfortunately there isn't a lot else you can do. There's a lot of data packed into an image and it takes some time to load and render it
I got confused in this situation. Im working on a new project like adding photo and description or other text input. I read a article it is doing this but it's old article.
My app like this; user will add a photo, title and description. Just like a simple Instagram.
(Honestly Im not gonna do instagram. :] )
(Also you can find it here:
https://fireship.io/lessons/flutter-slider-like-reflectly/.)
Is it possible to do that in Firebase Firestore ? Or should i use Cloud Storage?
If I have to use Cloud Storage, how can I add photo description or other text input.
I couldn't find any example like this in Google.
For a user to upload images to your app you would need something like Firebase Storage to host the images, so you will need Cloud Storage anyways. regarding the description, its possible to attach custom metadata to files in Cloud Storage (description, location, title etc...) However if you are going for something more complex, using Firestore together with Storage is probably your best bet. You could store a document for each image in an image collection in firestore and have the imageUrl field point to the Hosting URL along with any other data you might want
You need to use both, you should upload the image in cloud storage and after upload you will get a link of this file. Then you can add this link in firestore document with other information as well such as description or other text input like you wanted.
I'm currently building a messaging app with Meteor for fun, and I've stumbled into problem I'm not sure of how to solve. I want to replicate the functionality of apps like iOS Messages, WhatsApp, etc. where users can either enter text or some type of media: image, video, gif, etc.
My question is how do I structure the schema for my Messages collection, and how do I correctly store the data? My initial thought is to store the src of the media as the message content and use an {{#If image}} conditional to render the correct templates.
Is this the correct way to approach this problem? Am I missing anything?
You will first have to upload the media file to your server or to the cloud. The CollectionFS package should be useful to you. Once you have a shareable url for the media file you can save that in your messages collection. Alternatively you can put the _id of the media file in your messages collection as a foreign key.