Sep 13, 2020
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.
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.
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.
I have hosted the project on GitHub and you can view it below.
