Upload an Image to Firebase Android

Firebase is a mobile platform that helps you to quickly develop high quality apps, grow user base, and earn more. Firebase provides a variety of features and services that you can implement within your app as and when required. Various services provided by Firebase are Cloud Firestore, Firebase ML, Cloud Functions, Authentication, Hosting etc.

Today, we will show you how you can upload an image file from within your app to Firebase Database.

First, create the layout required to upload the image file. For that follow the below code:

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.ConstraintLayout 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"
	tools:context=".ImageUploader">

	<Button
	android:id="@+id/uploadBtn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:layout_marginEnd="16dp"
	android:text="Upload"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toTopOf="parent" />

	<Button
	android:id="@+id/signoutBtn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginStart="16dp"
	android:layout_marginTop="16dp"
	android:text="signout"
	android:visibility="gone"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />

	<ImageView
	android:id="@+id/displayImage"
	android:layout_width="0dp"
	android:layout_height="500dp"
	android:layout_marginTop="16dp"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintHorizontal_bias="1.0"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/uploadBtn"/>

	<Button
	android:id="@+id/selectbtn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginEnd="16dp"
	android:layout_marginBottom="32dp"
	android:text="choose"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintEnd_toEndOf="parent" />

	<ProgressBar
	android:id="@+id/pgBar"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginEnd="95dp"
	android:layout_marginBottom="45dp"
	app:layout_constraintBottom_toBottomOf="parent"
	android:visibility="gone"
	app:layout_constraintEnd_toStartOf="@+id/selectbtn" />

	</androidx.constraintlayout.widget.ConstraintLayout>

view raw xml hosted with ❤ by GitHub

Once done, add the following code to the java file of your android project. Make sure you have connected your project with Firebase.

	import androidx.annotation.NonNull;
	import androidx.annotation.Nullable;
	import androidx.appcompat.app.AppCompatActivity;

	import android.content.ContentResolver;
	import android.content.Intent;
	import android.net.Uri;
	import android.os.Bundle;
	import android.view.View;
	import android.webkit.MimeTypeMap;
	import android.widget.Button;
	import android.widget.ImageView;
	import android.widget.ProgressBar;
	import android.widget.Toast;

	import com.blogspot.svdevs.imageclassifier.modal.Upload;
	import com.google.android.gms.tasks.OnFailureListener;
	import com.google.android.gms.tasks.OnSuccessListener;
	import com.google.firebase.database.DatabaseReference;
	import com.google.firebase.database.FirebaseDatabase;
	import com.google.firebase.firestore.FirebaseFirestore;
	import com.google.firebase.storage.FirebaseStorage;
	import com.google.firebase.storage.OnProgressListener;
	import com.google.firebase.storage.StorageReference;
	import com.google.firebase.storage.UploadTask;
	import com.squareup.picasso.Picasso;

	public class ImageUploader extends AppCompatActivity {

	private Button chooseBtn;
	private Button signoutBtn;
	private Button uploadBtn;

	private static final int PICK_IMG_REQUEST = 1;
	private ImageView displayImg;
	private Uri imgUri;

	private StorageReference storeRef;
	private DatabaseReference ref;

	private ProgressBar pb;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_image_uploader);
	chooseBtn = findViewById(R.id.selectbtn);
	signoutBtn = findViewById(R.id.signoutBtn);
	uploadBtn = findViewById(R.id.uploadBtn);
	displayImg = findViewById(R.id.displayImage);
	pb = findViewById(R.id.pgBar);

	storeRef = FirebaseStorage.getInstance().getReference("uploads");
	ref = FirebaseDatabase.getInstance().getReference("uploads");

	chooseBtn.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	chooseImage();
	}
	}); uploadBtn.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	uploadImage();
	}
	}); signoutBtn.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {

	}
	});

	}

	private void chooseImage() {
	Intent chooser = new Intent();
	chooser.setType("image/*");
	chooser.setAction(Intent.ACTION_GET_CONTENT);
	startActivityForResult(chooser,PICK_IMG_REQUEST);
	}

	@Override
	protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
	super.onActivityResult(requestCode, resultCode, data);

	if(requestCode==PICK_IMG_REQUEST && resultCode==RESULT_OK && data!= null && data.getData()!=null){

	imgUri = data.getData();

	Picasso.get()
	.load(imgUri)
	.resize(400, 400)
	.centerCrop()
	.into(displayImg);

	//displayImg.setImageURI(imgUri);
	}
	}

	private String getFileExt(Uri uri){
	ContentResolver cr = getContentResolver();
	MimeTypeMap mime = MimeTypeMap.getSingleton();
	return mime.getExtensionFromMimeType(cr.getType(uri));
	}

	private void uploadImage() {

	if(imgUri!=null){
	final StorageReference fileRef = storeRef.child(System.currentTimeMillis()
	+"."+getFileExt(imgUri));

	fileRef.putFile(imgUri)
	.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
	@Override
	public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
	Toast.makeText(ImageUploader.this, "Upload Successful!", Toast.LENGTH_SHORT).show();
	uploadBtn.setEnabled(true);
	pb.setVisibility(View.GONE);
	Upload upload = new Upload(taskSnapshot.getStorage().getDownloadUrl().toString());

	String uploadId = ref.push().getKey();
	ref.child(uploadId).setValue(upload);
	}
	})
	.addOnFailureListener(new OnFailureListener() {
	@Override
	public void onFailure(@NonNull Exception e) {
	Toast.makeText(ImageUploader.this, "Error: "+e.getMessage(), Toast.LENGTH_SHORT).show();
	pb.setVisibility(View.GONE);
	uploadBtn.setEnabled(true);
	}
	})
	.addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
	@Override
	public void onProgress(@NonNull UploadTask.TaskSnapshot taskSnapshot) {
	uploadBtn.setEnabled(false);
	pb.setVisibility(View.VISIBLE);
	}
	});
	}else{
	Toast.makeText(this, "No files chosen..", Toast.LENGTH_SHORT).show();
	}

	}
	}