20. Cloud Storage

Written by Dean Djermanović

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:

1. Create a project in the Firebase console.
2. Enable Google sign-in.
3. Set security rules to the test mode to allow everyone read and write access.
4. 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:

Click on the Get Started button to set up Cloud Storage. The setup window will pop up:

For your first step, you need to set up security rules for your storage. Leave the default rules that allow reads and writes from authenticated users. Click Next.

In the second step, you need to choose the location for your Cloud Storage. Since you’re on the free Spark plan, you’re not allowed to change this, so just click Done. Your Cloud Storage is now ready for use:

You can see that your storage is empty; you haven’t added any files yet. Next, you’re going to change this. Click on the little folder icon in the top-right corner to create a new folder.

Name your folder photos and click Add folder. You’ll use this folder to store the photos.

Cloud storage is now set up and ready for use. Next, you’ll integrate it with your app.

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:

This is where you’ll choose the image that you want to store to the Cloud Storage. If you select an image now, nothing will happen, but you’ll change that soon.

Note: File Explorers may vary in appearance depending on your Android version, phone manufacturer and whether you’ve installed third-party file manager applications.

Next, you’ll implement the logic for uploading the image. When a user selects an image, you’ll upload it to Cloud Storage. Then you’ll get a URL of that image which you’ll use to display the image on the home screen.

Open CloudStorageManager.kt and replace uploadPhoto() with the following:

fun uploadPhoto(selectedImageUri: Uri, onSuccessAction: (String) -> Unit) {
  // 1
  val photosReference = firebaseStorage.getReference(PHOTOS_REFERENCE)

  // 2
  selectedImageUri.lastPathSegment?.let { segment ->
    // 3
    val photoReference = photosReference.child(segment)

    // 4
    photoReference.putFile(selectedImageUri)
        // 5
        .continueWithTask(Continuation<UploadTask.TaskSnapshot, Task<Uri>> { task ->
          val exception = task.exception
			// 6
          if (!task.isSuccessful && exception != null) {
            throw exception
          }
          return@Continuation photoReference.downloadUrl
        })
        // 7
        .addOnCompleteListener { task ->
        	// 8
          if (task.isSuccessful) {
            val downloadUri = task.result
            onSuccessAction(downloadUri.toString())
          }
        }
  }
}

1. First, you get a reference to the photos folder that you created earlier, by calling getReference on firebaseStorage. This is where you’ll upload your photo.

2. You’ll use lastPathSegment of the image URI as the name of the file that you’re going to save.

3. Get a reference that points to the location to which you’ll store the image.

4. To store the image to the reference, call putFile() on it and pass in the content URI of the image. This method stores the image asynchronously and returns an instance of UploadTask that you’ll use to track the upload progress.

5. Next, call continueWithTask() on UploadTask to get the download URL of the image you’re uploading when the image upload finishes.

6. If the Task is successful, you return photoReference.downloadUrl which returns the Task<Uri>. Otherwise, you throw an exception.

7. Finally, attach an OnCompleteListener so you’ll receive a notification when the upload finishes.

8. If the task is successful, you get the download URL by calling task.result. You pass that result to onSuccessAction().

Now, open HomeActivity.kt, navigate to onActivityResult() and replace it with following code:

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
  super.onActivityResult(requestCode, resultCode, data)
  if (requestCode == CHOOSE_IMAGE_REQUEST_CODE && resultCode == Activity.RESULT_OK) {
    val selectedImageUri = data?.data ?: return
    cloudStorageManager.uploadPhoto(selectedImageUri, ::onPhotoUploadSuccess)
  }
}

Here, you get the URI of the selected image and pass it to uploadPhoto() in the cloudStorageManager.

Build and run your app. Now, when you select an image from the File Explorer, it will upload to Cloud Storage.

When the upload finishes, you’ll display the image on the home screen:

Go to Firebase console and open your app’s storage. You’ll see the photo you uploaded in the photos folder:

Awesome! You’ve successfully connected your app to Firebase Cloud Storage!

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.