Upload Image to Firebase Storage

Hello world, today we are going to learn how we can upload an image to the firebase storage from our android application. We will see how we can show the progress of uploading
an image to the user.
Firebase storage gives use utility to upload the file and get the URL of that uploaded file so that we can access our file through the link. Let’s see the final result we are going to learn.

Before staring the code we need to enable firebase storage in our Firebase project. Open your Firebase console and select the project and click on storage then follow the on-screen instructions.

After creating the storage we need to change our storage rule so that we can
access the storage with the authentication.

Open your rules and change the if condition and replace != to ==.

After make changes hit the publish button and we are ready to go.

In your android project add these dependencies to work with firebase storage.

Add This in the project level build.gradle.

the first dependency is for firebase storage and the last dependency is
for pick images from gallery or camera.

After adding the dependencies.
Let’s see what tasks we need to perform to upload an image to the
firebase.

1. Pick an image from the gallery or camera.
2. Display picked image into ImageView.
3. Upload image on Click of the button.
4. Display progress bar while uploading.
5. After Uploading, get the uploaded image link.

Pick an image from the Gallery or Camera

The first step is to pick the image from the gallery or camera for that we
will going to use this library
https://github.com/Dhaval2404/ImagePicker. Let’s create our layout so that we can button and imageview. Open your
activity_main.xml file and add this code.

In the layout, we have an imageview to show the image when we choose from the
gallery. A progress bar and a textview to show the progress of uploading an
image and an upload button to start uploading. A simple layout.

We will pick an image on the click of imageview we need to add click listener
and write code for start activity to pick an image. See the below code.

In the above code, we are starting the image picker and to get the image URI
in the onActivityResult method. Let’s override this method in our class.

Display picked image into ImageView

After getting the image URI we will set the URI to imageview so that the user
can know which image he chose.

Note: if you are getting FileNotFound Exception then add
android:requestLegacyExternalStorage=”true” to the application tag in the
manifest.xml file.

We are storing the image URI in the variable.

See also:
Android Bottom Sheet

Upload image on Click of the button

Now we will upload the image on the click of the button. Let’s implement the
on click function on the button.

First, we are getting the storage reference then we are uploading the image in
the images folder and then concatenate the original image name with the file
format using the URI method getLastPathSegment. This method returns the
file name.

After that, we are uploading the image using the uploadImageRef and
calling its method putFile and pass our file Uri.

Then we will add a successful listener and failure listener. When your file
successfully uploads then addOnSuccessListener called and when there will be
any error then addOnFailureListener called.

Now see how to show progress bar while uploading.

Display progress bar while uploading

To display progress while uploading the file or image. We will
add addOnProgressListener to the UploadTask. Check the below code.

In the addOnProgressListener method, we are calculating the progress by
multiply 100 with data uploaded and divided by the total size of the file or
image.

Then we set the progress of the progress bar and also set the text of textview
to show the progress. This way we easily calculate the progress and set to the
progress bar.

Sometimes we have the case when we use putStrem and pass InputeStrem object
instead of putFile. In this case, if we call the getTotalByteCount method
we get -1 in return. To get the file size of InputStream e can use available
method to get the current data size. Note that call the available method right
after the InputStream method.

Now the only thing is left is to get the link of the file which we just
uploaded.

After Uploading, get the uploaded image link

To get the download link of the image or file we need to add code in the
success listener of the UploadTask.

This way we can get our download link of the file which we have just uploaded.

You can save this URL to the database for later use maybe.

Now you can run your project and your app will run smoothly.

If you learned something new then do share this article with your friends and batchmates and don’t forget to subscribe to our newsletter if you haven’t joined already for the latest updates.

Thanks for reading have a nice day.