How to upload Image to Firebase Storage in Android
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.
- Pick an image from the gallery or camera.
- Display picked image into ImageView.
- Upload image on Click of the button.
- Display progress bar while uploading.
- 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.
Subscribe to our Newsletter
By subscribing to our newsletter you're agreeing with our T&C.