Firebase Storage How to store and Retrieve images

firebase firebase-realtime-database firebase-storage

232,170

Solution 1

Update (20160519): Firebase just released a new feature called Firebase Storage. This allows you to upload images and other non-JSON data to a dedicated storage service. We highly recommend that you use this for storing images, instead of storing them as base64 encoded data in the JSON database.

You certainly can! Depending on how big your images are, you have a couple options:

1. For smaller images (under 10mb)

We have an example project that does that here: https://github.com/firebase/firepano

The general approach is to load the file locally (using FileReader) so you can then store it in Firebase just as you would any other data. Since images are binary files, you'll want to get the base64-encoded contents so you can store it as a string. Or even more convenient, you can store it as a data: url which is then ready to plop in as the src of an img tag (this is what the example does)!

2. For larger images

Firebase does have a 10mb (of utf8-encoded string data) limit. If your image is bigger, you'll have to break it into 10mb chunks. You're right though that Firebase is more optimized for small strings that change frequently rather than multi-megabyte strings. If you have lots of large static data, I'd definitely recommend S3 or a CDN instead.

Solution 2

Yes, you can store and view images in Firebase. You can use a filepicker to get the image file. Then you can host the image however you want, I prefer Amazon s3. Once the image is hosted you can display the image using the URL generated for the image.

Hope this helps.

Solution 3

I ended up storing the images in base64 format myself. I translate them from their base64 value when called back from firebase.

Solution 4

You can also use a service called Filepicker which will store your image to their servers and Filepicker which is now called Filestack, will provide you with a url to the image. You can than store the url to Firebase.

Solution 5

There are a couple of ways of doing I first did the way Grendal2501 did it. I then did it similar to user15163, you can store the image URL in the firebase and host the image on your firebase host or also Amazon S3;

View more solutions

232,170

dogger

Updated on December 28, 2020

Comments

dogger over 3 years

How to store and view images on firebase?
- mrwaim almost 9 years
  
  This is cool, if I store images using firebase, i can use firebase logins for security
- Mike McDonald about 8 years
  
  As of yesterday, Firebase released a new feature, called Firebase Storage (firebase.google.com/docs/storage), which allows you to upload and download arbitrary files (images, video, audio, etc.). It's backed by Google Cloud Storage (cloud.google.com/storage) for petabyte scale and competitive price. You should definitely check this out :)
- Nicholas Pesa about 8 years
  
  You could blob the image and get a serving URL using the Google images service and just store the serving URL. Then just load the images in some asynchronous method when viewed.
- Amr Lotfy over 7 years
  
  Users find it useful, why closed it ?
- Admin over 7 years
  
  @TinyGiant This is not asking for a recommendation, so why would it be closed as such? It is asking about a feature of a software service--completely on topic.
- Jeryl Cook over 7 years
  
  i hate premature closed comments. straight forward questions should be not closed for the love of god!
- amar almost 6 years
  
  SO is over moderated at times.. but i love mods they keep it clean and useful here..
MasterScrat almost 11 years

That's awesome. Did you ever run into some file size limitation? I don't think Firebase was made with multi-megabytes strings in mind...
Michael Lehenbauer almost 11 years

Firebase does have a 10mb (of utf8-encoded string data) limit. If your image is bigger, you'll have to break it into 10mb chunks. You're right though that Firebase is more optimized for small strings that change frequently rather than multi-megabyte strings. If you have lots of large static data, I'd definitely recommend S3 or a CDN instead.
MasterScrat almost 11 years

What I'm considering actually is using Firebase along with the Parse platform, which makes it really easy to store objects such as images and sounds, but lacks the real-time aspect.
wlingke over 9 years

These images get stored in the "Data Storage" right - so you'll fill up on your plan limits fairly quickly?
The_Brink over 9 years

Firebase really needs to added larger storage to their hosting system, or an s3 instance with apis built into their libraries.
Michael Lehenbauer over 9 years

@The_Brink Thanks for the feedback. This is definitely on our radar!
jamie almost 9 years

403 error trying to insert and render images- having permission issues with images once uploaded - any info on how you set up the upload. I tried to use acl: 'public-read' - but then the upload fails -with a 403. Any info policy doc and bucket policy that could help - would be great. AWS - documentation is difficult and there is no debugging information with error other then access denied.
Jakob Hartman almost 9 years

Ask this as another question
jamie almost 9 years

fair idea:) done - although the stack may be different - if there is any incite you can give me - would be welcome. AWS S3 error debugging is super frustrating - at least so far. stackoverflow.com/questions/31998827/…
ezain over 8 years

@MichaelLehenbauer but with this solution you can't manage the http cache and return a 304, I am wrong?
Michael Lehenbauer over 8 years

@ezain That's correct. I probably wouldn't recommend this approach for large production sites (you really want a CDN-backed image-serving service), but it's easy and "good enough" for a lot of usage.
taylorstine over 8 years

If you're like me, and you're like "I wonder how big a 10mb image is", here's a picture that's 10.5 bigmapblog.com/maps/top40us/XLVHysyaLODYwjoe.jpg. 10mb seems pretty large.
Frank van Puffelen over 8 years

That's indeed big. But since you're encoding the binary data into a string, the string will actually be bigger than the binary data. With base64 encoding every 3 bytes are encoded into 4 characters, so you lose 25% there already. The best advice remains to use the Firebase database for small images only and/or use a dedicated image storage backend.
bpolat over 8 years

i saw this service from your comment i tried but not very happy about it.
Dinesh over 8 years

But without server side scripting how to securely connect to S3 or a CDN (without exposing credentials on client side) to store large documents or images.
Luke Schlangen about 8 years

Are there any examples or tutorials of people doing this with AWS or Google Cloud Storage for a simple application? I know cloud spin does it, but that's a little more than I need. Any simple example like firepano that uses AWS or Google Cloud?
Lukas Liesis about 8 years

Check out updated firbase docs for this: firebase.google.com/docs/storage/#key_functions
Ravi Ji over 7 years

Is it free of this dedicated storage?
Ojonugwa Jude Ochalifu almost 7 years

If you are going to host the image on amazon, why not save it in Firebase Storage instead?
Ojonugwa Jude Ochalifu over 6 years

The only problem with this approach is that when the images are large, moving them across activities makes the app slow and in some cases crash