Android Tutorial How To Insert Image Into Firebase Storage

Lately, Google has recommend to use Firebase as your storage when you build an application (web or mobile application). Firebase also known as serverless. Serverless means you no more need API for transfer/send data, with firebase it will be done.

Firebase has much features that can use in you application, there are :

• Firebase Realtime message
• Firebase Cloud Firestore
• Firebase Cloud Function
• Firebase Storage.

You can read all of these features in firebase official website to get more information about those features.

In this article I will show you how to insert image into Firebase Storage. 

Create your application On Firebase

1. Go to Firebase Console and create your project

2. Choose your platform (Choose Android)

3. Add your SHA-1 Key and your package name

4. Download the google-services.json

5. And place the google-services.json inside you app folder

Gradle Setting

Now let setup your gradle and add some dependencies of Firebase

build.gradle (Project:YourProjectName)

	// Top-level build file where you can add configuration options common to all sub-projects/modules.
	buildscript {
	repositories {
	google()
	jcenter()
	}
	dependencies {
	classpath 'com.android.tools.build:gradle:3.1.1'
	classpath 'com.google.gms:google-services:3.1.1'
	// NOTE: Do not place your application dependencies here; they belong
	// in the individual module build.gradle files
	}
	}
	allprojects {
	repositories {
	google()
	jcenter()
	}
	}
	task clean(type: Delete) {
	delete rootProject.buildDir
	}

view raw build.gradle hosted with ❤ by GitHub

build.gradle (Module:App)

	apply plugin: 'com.android.application'
	android {
	compileSdkVersion 27
	defaultConfig {
	applicationId "com.putuguna.insertimagetofstorage"
	minSdkVersion 15
	targetSdkVersion 27
	versionCode 1
	versionName "1.0"
	testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
	}
	buildTypes {
	release {
	minifyEnabled false
	proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
	}
	}
	}
	dependencies {
	implementation fileTree(dir: 'libs', include: ['*.jar'])
	implementation 'com.android.support:appcompat-v7:27.1.1'
	implementation 'com.android.support.constraint:constraint-layout:1.1.0'
	testImplementation 'junit:junit:4.12'
	androidTestImplementation 'com.android.support.test:runner:1.0.2'
	androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
	//for firebase
	implementation "com.google.firebase:firebase-firestore:11.8.0"
	implementation "com.google.firebase:firebase-storage:11.8.0"
	//for image crop
	implementation "com.theartofdev.edmodo:android-image-cropper:2.4.7"
	//for glide
	implementation 'com.github.bumptech.glide:glide:4.7.1'
	annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
	}
	apply plugin: 'com.google.gms.google-services'

view raw build.gradle hosted with ❤ by GitHub

Ok your gradle has been setup, now turn to create the process how to insert image into Firebase Storage.

Java And XML Code

activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	tools:context=".MainActivity">
	<ImageView
	android:layout_margin="10dp"
	android:id="@+id/iv_photo_profile"
	android:layout_width="match_parent"
	android:layout_height="300dp"
	android:src="@mipmap/ic_launcher"/>
	<LinearLayout
	android:layout_margin="10dp"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	<Button
	android:id="@+id/btn_upload"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="Upload Photo"/>
	</LinearLayout>
	</LinearLayout>

view raw activity_main.xml hosted with ❤ by GitHub

MainActivity.java

Chose your image from gallery or taken from camera using Edmodo Image Cropper

	CropImage.activity()
	.setGuidelines(CropImageView.Guidelines.ON)
	.setAutoZoomEnabled(true)
	.setAspectRatio(1, 1)
	.setCropShape(CropImageView.CropShape.OVAL)
	.setRequestedSize(1280, 1280)
	.start(this);

view raw CropImage.java hosted with ❤ by GitHub

After image taken, process the image inside method OnActivityResult and upload it into Firebase Storage

	@Override
	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
	progressDialog.show();
	if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
	CropImage.ActivityResult result = CropImage.getActivityResult(data);
	if (resultCode == RESULT_OK) {
	Uri resultUri = result.getUri();
	uploadImage(resultUri);
	Toast.makeText(this, "URI : " + resultUri.toString(), Toast.LENGTH_SHORT).show();
	} else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
	Exception error = result.getError();
	if (BuildConfig.DEBUG) error.printStackTrace();
	}
	}
	}
	private void uploadImage(final Uri uriImage){
	StorageReference ref = storageReference.child("photo_profile").child("my_photo");
	ref.putFile(uriImage)
	.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
	@Override
	public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
	progressDialog.dismiss();
	Glide.with(MainActivity.this)
	.load(uriImage)
	.into(ivPhotoProfile);
	}
	})
	.addOnFailureListener(new OnFailureListener() {
	@Override
	public void onFailure(@NonNull Exception e) {
	progressDialog.dismiss();
	Toast.makeText(MainActivity.this, "Failed Uploaded", Toast.LENGTH_SHORT).show();
	}
	});
	}

view raw UploadImage.java hosted with ❤ by GitHub

Take a look at this code :

StorageReference ref = storageReference.child("photo_profile").child("my_photo");

view raw Code.java hosted with ❤ by GitHub

Here is the result of the above code :

That code save your image into path photo_profile/my_photo.jpg (last child will be set as the name of the image). By using this path (same path), the new image that you store will replace the old image, why? Because you put the file into the same path like before.

So, how to store much image into Firebase Storage? Easy. Just replace the last child using Current Milliseconds

StorageReference ref = storageReference.child("photo_profile").child(String.valueOf(System.currentTimeMillis()));

view raw Code.java hosted with ❤ by GitHub

The result of the above code will be like this :

After your image has stored into Firebase Storage, now use the following code to display the image into your ImageView

	private void displayImage(){
	progressDialog.setMessage("Displaying image");
	progressDialog.show();
	try {
	StorageReference storageReference = FirebaseStorage.getInstance().getReference().child("photo_profile").child("my_photo");
	storageReference.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
	@Override
	public void onSuccess(Uri uri) {
	progressDialog.dismiss();
	Glide.with(MainActivity.this)
	.load(uri)
	.into(ivPhotoProfile);
	}
	}).addOnFailureListener(new OnFailureListener() {
	@Override
	public void onFailure(@NonNull Exception e) {
	progressDialog.dismiss();
	Toast.makeText(MainActivity.this, e.getMessage()+". Please upload your image first", Toast.LENGTH_SHORT).show();
	}
	});
	}catch (Exception e){e.printStackTrace();}
	}

view raw DisplayImage.java hosted with ❤ by GitHub

Full Code of MainActivity :

	package com.putuguna.insertimagetofstorage;
	import android.app.ProgressDialog;
	import android.content.Intent;
	import android.net.Uri;
	import android.support.annotation.NonNull;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.Button;
	import android.widget.ImageView;
	import android.widget.Toast;
	import com.bumptech.glide.Glide;
	import com.google.android.gms.tasks.OnFailureListener;
	import com.google.android.gms.tasks.OnSuccessListener;
	import com.google.firebase.storage.FirebaseStorage;
	import com.google.firebase.storage.StorageReference;
	import com.google.firebase.storage.UploadTask;
	import com.theartofdev.edmodo.cropper.CropImage;
	import com.theartofdev.edmodo.cropper.CropImageView;
	public class MainActivity extends AppCompatActivity implements View.OnClickListener{
	private ImageView ivPhotoProfile;
	private Button btnUpload;
	private ProgressDialog progressDialog;
	private FirebaseStorage firebaseStorage = FirebaseStorage.getInstance();
	private StorageReference storageReference = firebaseStorage.getReference();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	initView();
	}
	private void initView(){
	btnUpload = findViewById(R.id.btn_upload);
	ivPhotoProfile = findViewById(R.id.iv_photo_profile);
	progressDialog = new ProgressDialog(this);
	progressDialog.setMessage("Uploading image ...");
	btnUpload.setOnClickListener(this);
	}
	@Override
	public void onClick(View v) {
	int id = v.getId();
	if(id==R.id.btn_upload){
	openImage();
	}
	}
	private void openImage(){
	CropImage.activity()
	.setGuidelines(CropImageView.Guidelines.ON)
	.setAutoZoomEnabled(true)
	.setAspectRatio(1, 1)
	.setCropShape(CropImageView.CropShape.OVAL)
	.setRequestedSize(1280, 1280)
	.start(this);
	}
	@Override
	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
	progressDialog.show();
	if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
	CropImage.ActivityResult result = CropImage.getActivityResult(data);
	if (resultCode == RESULT_OK) {
	Uri resultUri = result.getUri();
	uploadImage(resultUri);
	Toast.makeText(this, "URI : " + resultUri.toString(), Toast.LENGTH_SHORT).show();
	} else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
	Exception error = result.getError();
	if (BuildConfig.DEBUG) error.printStackTrace();
	}
	}
	}
	private void uploadImage(final Uri uriImage){
	StorageReference ref = storageReference.child(String.valueOf(System.currentTimeMillis()));
	ref.putFile(uriImage)
	.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
	@Override
	public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
	progressDialog.dismiss();
	Toast.makeText(MainActivity.this, "Success Uploaded", Toast.LENGTH_SHORT).show();
	Glide.with(MainActivity.this)
	.load(uriImage)
	.into(ivPhotoProfile);
	}
	})
	.addOnFailureListener(new OnFailureListener() {
	@Override
	public void onFailure(@NonNull Exception e) {
	progressDialog.dismiss();
	Toast.makeText(MainActivity.this, "Failed Uploaded", Toast.LENGTH_SHORT).show();
	}
	});
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

Run your application, select image and click button upload, then the image will stored into Firebase Storage, Goodluck!