294

How to store and view images on firebase?

Ashish
  • 6,791
  • 3
  • 26
  • 48
dogger
  • 2,965
  • 2
  • 14
  • 6
  • 1
    This is cool, if I store images using firebase, i can use firebase logins for security – mrwaim Sep 02 '15 at 22:08
  • 7
    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 :) – Mike McDonald May 19 '16 at 20:31
  • 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. – Nicholas Pesa Jun 19 '16 at 04:39
  • 29
    Users find it useful, why closed it ? – Amr Lotfy Jan 02 '17 at 04:45
  • 8
    @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. –  Jan 28 '17 at 14:01
  • 5
    i hate premature closed comments. straight forward questions should be not closed for the love of god! – Jeryl Cook Mar 17 '17 at 11:57
  • 1
    SO is over moderated at times.. but i love mods they keep it clean and useful here.. – amar Aug 24 '18 at 06:50

6 Answers6

287

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.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Michael Lehenbauer
  • 16,229
  • 1
  • 57
  • 59
  • 2
    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... – MasterScrat Jun 27 '13 at 17:51
  • 8
    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. – Michael Lehenbauer Jun 27 '13 at 22:25
  • 1
    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. – MasterScrat Jun 28 '13 at 07:02
  • These images get stored in the "Data Storage" right - so you'll fill up on your plan limits fairly quickly? – wlingke Dec 28 '14 at 06:06
  • 14
    Firebase really needs to added larger storage to their hosting system, or an s3 instance with apis built into their libraries. – The_Brink Jan 14 '15 at 23:48
  • 9
    @The_Brink Thanks for the feedback. This is definitely on our radar! – Michael Lehenbauer Jan 17 '15 at 04:49
  • @MichaelLehenbauer but with this solution you can't manage the http cache and return a 304, I am wrong? – ezain Oct 19 '15 at 19:47
  • 4
    @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. – Michael Lehenbauer Oct 20 '15 at 00:09
  • 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 http://www.bigmapblog.com/maps/top40us/XLVHysyaLODYwjoe.jpg. 10mb seems pretty large. – taylorstine Feb 03 '16 at 16:28
  • 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](http://stackoverflow.com/questions/4715415/base64-what-is-the-worst-possible-increase-in-space-usage), 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. – Frank van Puffelen Feb 06 '16 at 22:56
  • 2
    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. – Dinesh Mar 11 '16 at 12:20
  • 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? – Luke Schlangen Apr 17 '16 at 12:10
  • Is it free of this dedicated storage? – Ravi Ji Oct 20 '16 at 12:30
27

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.

Gastón Saillén
  • 12,319
  • 5
  • 67
  • 77
user15163
  • 641
  • 1
  • 7
  • 10
20

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

Joaquin Iurchuk
  • 5,499
  • 2
  • 48
  • 64
Grendel2501
  • 249
  • 2
  • 7
12

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.

Felice
  • 571
  • 1
  • 7
  • 22
3

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;

Gastón Saillén
  • 12,319
  • 5
  • 67
  • 77
Jakob Hartman
  • 346
  • 3
  • 8
  • 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. – jamie Aug 13 '15 at 06:41
  • 2
    Ask this as another question – Jakob Hartman Aug 13 '15 at 18:15
  • 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. http://stackoverflow.com/questions/31998827/403-error-with-ng-file-upload-and-public-read-so-images-dont-render-firebase – jamie Aug 13 '15 at 21:38
2

Using Base64 string in JSON will be very heavy. The parser has to do a lot of heavy lifting. Currently, Fresco only supports base supports Base64. Better you put something on Amazon Cloud or Firebase Cloud. And get an image as a URL. So that you can use Picasso or Glide for caching.

Gastón Saillén
  • 12,319
  • 5
  • 67
  • 77
Asthme
  • 5,163
  • 6
  • 47
  • 65