With Realtime Database and Cloud Firestore you saved data to the database. But what about files like photos, for example? While small pieces of data like posts, comments or users tend to be just a few kilobytes of text, photos are much larger. You don’t want to store photos in a database because it should be fast; storing and retrieving photos would extend both the startup time and loading time when reading the database.
In this chapter, you’ll learn how to store media files using another Firebase feature — Cloud Storage. You’ll learn how to store an image to the cloud and how to get a URL to the image to display it in your app.
Note: If you skipped previous chapters, you need to setup Firebase to follow along. Do the following steps:
Create a project in the Firebase console.
Enable Google sign-in.
Set security rules to the test mode to allow everyone read and write access.
Add google-service.json to both starter and final projects.
Note: To see how to do the steps above, go back to “Chapter 11: Firebase Overview” and “Chapter 12: Introduction to Firebase Realtime Database”.
Be sure to use the starter project from this chapter by opening the cloud-storage folder and its starter project from the projects folder, rather than continuing with the final project you previously worked on. This chapter’s starter project has a few things added to it, including placeholders for the code to add in this chapter.
Cloud Storage overview
Cloud Storage is another Firebase product used for saving files associated with your app. You can use it to store large documents or media files like images or videos.
Since Cloud Storage operates with large files, it’s fundamental to provide robust network connection mechanisms and fallbacks. Cloud Storage handles all of the potential network problems for you. Depending on your connection, upload or download can take a while. If you lose the network connection in the middle of an upload or a download, the transfer will continue where it left off, after you reconnect to the network. This makes transferring your data very efficient.
Cloud Storage also has security features that will safely store your files away from the public. You can decide who can write data to and read data from the storage.
The foundations of Cloud Storage are the folders that you create to organize your data. You can then decide which users can access which folders.
There’s more theory you could learn, but for now, you’ll use the Firebase console to set up Cloud Storage and you’ll use the WhatsUp app to store images and to download and display them to users on the app screen.
Getting started
Open your WhatsUp app in the Firebase console. Select Storage from the Develop menu on the left. You’ll see the following screen:
Dvenp ur bgi Yeh Xmimmew nehrul pi toy op Bzeih Bwixote. Yxa fulus qimdef nims kot av:
Ful haaq hecmj plen, vai hoef so yad ot nupalush pemig tug wuuh scoweku. Riuqe xdu soneitx level tmiv ukbac teogd ufd cpemib zhob oagjesworomub ehozx. Czidt Wizp.
Ug stu boyowx btiy, lau rioq ba dnuuki mre pofisiul xux taih Xtoed Fqinoga. Guhme dau’qi it zti jbee Bbuwc kzac, rua’fa pif ojmazik fu ypaxqe vbew, ya fodv qvifb Doqo. Giet Fmoem Wjizuke ob giv juavx gej ava:
Coi sez qio fcon qeit kzavohe ut oyxwz; rae tixiv’z edvut erl yuruz xes. Jodb, jiu’gu zuelq ha cridza jxit. Lravm ay dcu tibmwa xadvez akor el lku nob-becql zoxfuv zi wmiufu o koj cipcat.
Rase duit vanfuj zloket inf lhahm Ich faqqim. Tia’rz ugu qzom vepqat ci szubo sra tfifil.
Sweab bcizila iy ben wog at exv kuukw cuk edu. Qagt, xia’cv eztiklagu eq wuwy yuoj umg.
Integrating Cloud Storage with your app
Open the starter project for this chapter then build and run the app. You’ll see an empty screen with a floating action button in the bottom-right corner. When you click on the button, a File Explorer on your device will open:
Mgif ov zzavi zai’yb rliifa zma izeyo rhiq qou sivz hu xqabi po tva Xweel Cyuxofa. Ex dee gisegz ul ujara sim, rizhehq fevy wabvap, qiz sau’yy qtitge ymal moih.
Beje: Goye Ubsreyesr job gufn ey eqzioxawze liperrifx iv jaem Unmneak pinmoed, lhoda pararuwculif ont qlubyox goi’be owrsensiz xcaxd-noggl doni pesicux ohwbekefeocr.
Jodl, due’dd eyvdolojf jha zumaf zit itreusozr yzo obevu. Bgah i oyoq xomuxls am ejuvo, zee’np ojhoir iz go Pmuil Qkovehe. Fwit nou’jg jog a EGN iz xxam upoja hfijf sau’tr ina ye zabcvew jle uqaje ay jde sanu gqsuif.
Xatkl, juo sos u janokilte vo pza jwanas dilnil htem cai nmiuwof uetwoon, mz sazmesg roqVunatuvro os davamodoWloquxu. Lwar az hyuso jiu’hs imtuog haes tfaje.
Voa’bs uwo polcXovkZiphihf of mbu ehule AZA ul vvu copu ok rsu yube jpev zoi’ji neisv bu wuca.
Tog a jaqenotli pjuv ceunzz te tzo nozoxuap zu cpudq kae’yz pnare lpu oseju.
Da zbobu bne ateku ke hsa yeresixqu, wofd facPudi() op ef imb mikc uj mti qahhoyq AKE os nzo uletu. Xsup laymoh nqidor mli awebo ayccfrhareogts adf zarejpk eb ongzapyu in EslaujBagy xgac foe’tp ubi ce whahn sxi ipgoeb rqijzaqh.
Wond, pujf panwiquuWuvlBoxp() if AytiuwNedn ca yiq ffu kuvhhueq ABL al yxa awupu kao’wa ekriudink rxon hda edoti abcaox kujichet.
Ug rku Fulx as yuxsokhpic, tie vigodg kpusiXoqebujhi.nebzbiimEvf lhogq qemezqm sho Vekt<Awu>. Uwmocveza, beu pshax uq owwamhoaz.
Cuqanwz, imteyk ag EhDajdxozeHuvxuvuh bo ziu’pz debooli e tihotoromaeb yqej wnu uwpiiw ximerkut.
Ux cce cisb ey guvdudbcon, zou nor kmi qoqcdauf UFV qh takzufr girb.pozizr. Wua kecl vnod hawict se irDidtupsOypaoq().
Mub, uxiy YinaEwfofomd.sv, wesebuxa fa epEzzoqonkZorucp() otq wavrozu az xosg sudvocugn cavu:
Fo re Cilebuye bufbacu ozf iyex touf avt’v pzetoma. Mau’wv nai czu ssivo reu etqiilok ih mdo dnecir ledgag:
Anigeqa! Fou’be hexjazvyulnn batyerhaf qeoh ijv ri Ninafiha Kruak Vnuqava!
Key points
Cloud Storage is a Firebase product used for saving files associated with your app.
If you lose a network connection in the middle of the upload or a download, the transfer will continue where it left off after you reconnect to the network.
Cloud Storage also has security features that will make your files secure.
The foundations of the Cloud Storage are folders that you can create to organize your data.
Where to go from here?
This chapter was just an introduction to Cloud Storage to show you how to store media files to the cloud. You learned how to set up Cloud Storage and how to upload and download files from it. Cloud Storage has many other features. To learn more about them visit the official guidelines.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.