Firebase Storage Example – Uploading and Retrieving Files

In a previous tutorial we learnt about Firebase Storage. But I didn’t cover retrieval of the uploaded files from Firebase Storage. So here is another Firebase Storage Example. In this tutorial we will learn Uploading …

firebase storage example

In a previous tutorial we learnt about Firebase Storage. But I didn’t cover retrieval of the uploaded files from Firebase Storage. So here is another Firebase Storage Example. In this tutorial we will learn Uploading Files to Firebase Storage and Retrieving Uploaded Files from Firebase Storage. So lets start this Firebase Storage Example.

If you are dealing with PDF Files Follow this Tutorial
Firebase Storage Upload and Download PDF Files

Firebase Storage Example Video Demo

  • You can watch this video to know what we are going to build in this tutorial.

Firebase Storage Example

  • As always the first step is creating a new Android Studio Project.

Creating a New Project

  • I have just created a project named FirebaseUpload.
  • In the project we will be uploading images to Firebase Storage and then we will fetch back the uploaded images to display them into RecyclerView.
  • So now we will setup firebase storage to our project.

Setting Up Firebase Storage and Firebase Database

  • We will upload the images to Firebase Storage and in the Firebase Database we will store the image URL. For this we need to setup both in our project.
  • Go to tools -> firebase

setting firebase

  • Now you will see an Assistant Window, you can setup Firebase Database from here.
firebase database
Firebase Database
  • The same way you can setup Firebase Storage.

firebase storage

Creating Layout

  • Now we need to build the following layout for activity_main.xml.
firebase storage example
activity_main.xml
  • We have the following components in the above layout.
    Choose Button: We will tap this button to choose an image from the gallery.
    EditText Enter Name: In this EditText we will put the label for the chosen image.
    ImageView: The middle area (you cann’t see it in the layout because it is blank ImageView) contains an ImageView where we will display the chosen image.
    Upload Button: Tapping this button will upload the selected image to Firebase Storage.
    TextView Uploads: Tapping this TextView will open another activity where we will display the uploaded images with labels.
  • You can use the following xml code to build the above layout.

Defining Firebase Constants

  • Create a java class named Constants.java and define the following.

Defining View Objects and Constants

  • Come inside MainActivity.java and define the following objects and constants.

  • Now inside onCreate() we will initialize the the objects and attach click listeners.

Adding File Chooser

  • Define a new method showFileChooser().

  • Now we need to handle the Intent result. For this we will override the method onActivityResult().

  • Now we will call the method showFileChooser() when the choose image button is clicked. For this come inside the overriden method onClick() and write the following code.

  • Now try running the application and you will see that choose image is working fine.

choose image

  • Now we will code the upload functionality.

Uploading File to Firebase Storage and Saving URL to Firebase Database

Building Database Model

  • First we will create a class to store the Image data to Firebase Database. So create a class named Upload.java.

Getting Selected File Extension

  • We will rename the file to a unique name as if we upload the file with same name then files would be overwritten. So after renaming the file the extension should remain the same. So inside MainActivity.java create a method getFileExtension() and it will return as the extension of the selected file by taking Uri object.

Uploading the File to Firebase Storage

  • Now we will create a method inside MainActivity.java that will upload the selected file to Firebase Storage. So create a method name uploadFile() and write the following code.

  • Now we need to call this method on Upload Button Click. So modify onClick() method as below.

  • Now try running your application and upload will work.

firebase storage upload

Retrieving Files from Firebase Storage

  • Now we will create a new activity where we display all the uploaded images with labels.
  • So create a new activity named ShowImagesActivity and inside the layout file of this activity we will create a RecyclerView.

Adding RecyclerView and CardView

  • First we need to add dependencies for RecyclerView and CardView.
  • Go to File -> Project Structure and go to dependencies tab. Here click on plus icon and select Library dependency.

adding recyclerview

  • Now here you need to find and add RecyclerView and CardView.

adding recyclerview

  • Now sync your project.

Adding Glide

  • We also need to add Glide Library. As we need to fetch images from the URL and for this I will be using Glide Library.
  • So just modify  dependencies block of your app level build.gradle file as below.

  • Now sync the project with gradle.

Creating RecyclerView Layout

  • Now we will design the layout for our RecyclerView. It will contain an ImageView and a TextView inside a CardView. So create a new layout resource file named layout_images.xml.

  • So our layout for RecyclerView is ready. Now we will create an Adapter.

Creating RecyclerView Adapter

  • Create a class named MyAdapter.java and write the following code.

  • Now come inside layout file of this ShowImagesActivity and add a RecyclerView.

  • Now write the following code inside ShowImagesActivity.java

  • Thats it now just run your application and you will see all the fetched images in the next activity.

firebase storage example

  • Bingo! Its working absolutely fine.  Now if you are having troubles or confusions you can get my source code from the link given below.

[sociallocker id=1372] Firebase Storage Example Source Code Download [/sociallocker]

So thats it for Firebase Storage Example. If you are facing problems then let me know in the comment section and I will try to help you out. Also don’t forget to share this Firebase Storage Example  if you found it useful. Thank You 🙂

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x