DevCNairobi
Published in

DevCNairobi

Multiple File Upload to Firebase — Android

Firebase is a Backend-As-A-Service — BaaS — owned by Google for application development that frees developers of the hassle of integrating several backend services among others, leaving developers to worry about creating great user interfaces. In this article, we are going to create a simple Android application that utilizes Firebase Cloud Storage to upload images from our gallery.

Create the project

Create a new Android Studio project and give it a name. I will be using Java for this project with minimum SDK version 23.

Design the layout

After that is complete we can now design our layout. We will be utilizing RecyclerView for our list items so we need to import the required dependencies. We will design two layouts, one for the main layout and the other is the RecyclerView item design. Below is our main layout:

In the above code snippet, we have a title, a button where we will trigger the click event and our RecyclerView. Next, let us design our RecyclerView item layout. Create a new layout resource file and name it single_list_item. We need to import some vector drawables for the image and loading representation. I got my icons from icons8. You can use the default vector drawables in Android Studio as well.

Icons we will use
Main layout of our app
Main layout of our app

Required dependencies

The required dependencies are RecyclerView and runtime permissions. In addition we also have the Firebase Storage permission as well. We will get to the runtime permissions later. Below is my build.gradle(app) code snippet.

Required permissions

Next we need to add the required permissions for the project which are INTERNET and READ_EXTERNAL_STORAGE permissions.

Additionally you can change the theme and colors as you’d like.

Connect to Firebase

If you didn’t add the Firebase Storage permission manually in the build.gradle file, you can use the Tools menu and select Firebase. This will pop out the Firebase Assistant with a list of menu choices. Scroll down to Storage and add Firebase to your project. Choose an existing project or create a new one then add Firebase Storage dependency.

Head over to your project in the Firebase console and select Storage. Click on the Rules tab and we will change a minor thing. Change the != null property to == null for development purposes.

rules_version = ‘2’;
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth == null;
}
}
}

Create the Adapter

We also need to create the adapter for our RecyclerView items. This will be in charge of binding our items to the ViewHolder class and adding them to the Arraylist. Right-click on your project folder and create a new Java class and name it UploadListAdapter. This class will extend RecyclerView.Adapter of the type UploadListAdapter.ViewHolder . Next we need to implement those methods so click on the light bulb icon or press Alt+Enter.

MainActivity

There are a number of methods involved in our MainActivity.java class. First off we need to link the ids of our layout items in the OnCreate method. We have two Arraylists to store our filenames for the selected images as well as another for the uploaded images. Also in the OnCreate method we initialize our adapter class and and a layout manager to render the RecyclerView. We as well initialize our Firebase Storage Reference.

For the button, we set an OnClickListener to it and set an Intent to fire up the File Explorer or Gallery app. Before that we request permission to access local storage on our phone.

Request for storage permission
Request for local storage

Next we need to override the OnActivityResult method. Initially, we had created a static int, we counter check this against the request code and if they match we perform an operation. Here, we increment the selected items as the user taps on them.

For the runtime permissions we use Dexter library.

The photos we upload will be stored in a folder we have named Images. In addition, we have a String method called getFileName that assigns the file name to the TextView we set in our layout. Our vector drawable changes as well when we successfully upload an item to a checked image.

View uploaded images

Having done all that, head over to your Firebase console and under the Storage menu you can view your uploaded images.

Uploaded images in console
Uploaded images in Firebase console

I have hosted the project on GitHub and you can view it below.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Licio Lentimo

Licio Lentimo

116 Followers

I write content on Android and Web technologies. Currently focusing on Cybersecurity. Find me on liciolentimo.com