How to save the perfect url-link of uploaded image in Realtime Firebase database?

Question

I am using the following code to upload the image and save the text and URL link to the Realtime firebase database but I am not able to access the image using the saved URL link.What is the mistake I am doing? how do I save the perfect URL link of the uploaded image in Firebase?

The code for MainActivity.java

package com.example.project1;

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

import android.content.ContentResolver;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.webkit.MimeTypeMap;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Continuation;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
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 MainActivity extends AppCompatActivity {
    private static final int PICK_IMAGE_REQUEST = 1;
    Button mButtonChooseImage;
    EditText mEditTextFileName;
    ImageView mImageView;
    ProgressBar mProgressBar;
    Uri mImageUri;
    Button mButtonUpload;
    StorageReference mStorageRef;
    DatabaseReference mDatabaseRef;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButtonChooseImage = findViewById(R.id.button_choose_image);
        mButtonChooseImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                openFileChooser();
            }
        });
        mEditTextFileName = findViewById(R.id.edit_text_file_name);
        mImageView = findViewById(R.id.image_view);
        mButtonUpload = findViewById(R.id.button_upload);
        mProgressBar = findViewById(R.id.progress_bar);
        mStorageRef = FirebaseStorage.getInstance().getReference("products");
        mDatabaseRef = FirebaseDatabase.getInstance().getReference("products");

        mButtonUpload.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                uploadFile();
            }
        });
    }

    private void openFileChooser() {
        Intent intent = new Intent();
        intent.setType("image/*");
        intent.setAction(Intent.ACTION_GET_CONTENT);
        startActivityForResult(intent, PICK_IMAGE_REQUEST);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK
                && data != null && data.getData() != null) {
            mImageUri = data.getData();
            Picasso.with(this).load(mImageUri).into(mImageView);
        }
    }


    private String getFileExtension(Uri uri){
        ContentResolver cR = getContentResolver();
        MimeTypeMap mime = MimeTypeMap.getSingleton();
        return mime.getExtensionFromMimeType(cR.getType(uri));
    }
    //
    private void uploadFile() {
        if (mImageUri != null) {
            StorageReference fileReference = mStorageRef.child(System.currentTimeMillis() + "." + getFileExtension(mImageUri));
            UploadTask uploadTask = fileReference.putFile(mImageUri);
            uploadTask.addOnFailureListener(new OnFailureListener() {
                @Override
                public void onFailure(@NonNull Exception exception) {
                    // Handle unsuccessful uploads
                    Toast.makeText(MainActivity.this, exception.getMessage(), Toast.LENGTH_SHORT).show();
                }
            }).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                @Override
                public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                    Handler handler = new Handler();
                    handler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            mProgressBar.setProgress(0);
                        }
                    }, 500);
                    Toast.makeText(MainActivity.this, "Upload successful", Toast.LENGTH_LONG).show();
                }
            }).addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
                @Override
                public void onProgress(@NonNull UploadTask.TaskSnapshot snapshot) {
                    double progress = (100.0 * snapshot.getBytesTransferred()/snapshot.getTotalByteCount());
                    mProgressBar.setProgress((int) progress);
                }
            });
// get download URL
            Task<Uri> urlTask = uploadTask.continueWithTask(new Continuation<UploadTask.TaskSnapshot, Task<Uri>>() {
                @Override
                public Task<Uri> then(@NonNull Task<UploadTask.TaskSnapshot> task) throws Exception {
                    if (!task.isSuccessful()) {
                        throw task.getException();
                    }
                    // Continue with the task to get the download URL
                    Task<Uri> url1 = fileReference.getDownloadUrl();
                    Upload upload = new Upload(mEditTextFileName.getText().toString().trim(), url1.toString());
                    String uploadId = mDatabaseRef.push().getKey();
                    mDatabaseRef.child(uploadId).setValue(upload);
//                    Toast.makeText(MainActivity.this, "Url : "+url1, Toast.LENGTH_LONG).show();
                    return fileReference.getDownloadUrl();
                }
            }).addOnCompleteListener(new OnCompleteListener<Uri>() {
                @Override
                public void onComplete(@NonNull Task<Uri> task) {
                    if (task.isSuccessful()) {
                        Uri downloadUri = task.getResult();
                    }
                    else {
                        // Handle failures
                        // ...
                    }
                }
            });

        }
    }
}

The code for Upload.java:

package com.example.project1;

public class Upload {
    private String mName;
    private String mImageUrl;
    public Upload() {
        //empty constructor needed
    }
    public Upload(String name, String imageUrl) {
        if (name.trim().equals("")) {
            name = "No Name";
        }
        mName = name;
        mImageUrl = imageUrl;
    }
    public String getName() {
        return mName;
    }
    public void setName(String name) {
        mName = name;
    }
    public String getImageUrl() {
        return mImageUrl;
    }
    public void setImageUrl(String imageUrl) {
        mImageUrl = imageUrl;
    }
}

XML code of activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_view_show_uploads"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:text="Upload Product Images"
        android:textColor="#f00fff"
        android:textSize="25sp" />

    <Button
        android:id="@+id/button_choose_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view_show_uploads"
        android:layout_marginTop="50dp"
        android:text="Choose file" />
    <EditText
        android:id="@+id/edit_text_file_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_toEndOf="@+id/button_choose_image"
        android:layout_below="@id/text_view_show_uploads"
        android:layout_marginTop="50dp"
        android:hint="Enter file name"
        android:layout_marginLeft="16dp"
        android:layout_toRightOf="@+id/button_choose_image" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="371dp"
        android:layout_height="395dp"
        android:layout_above="@id/progress_bar"
        android:layout_below="@id/edit_text_file_name"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" />
    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_upload"
        android:layout_marginBottom="16dp" />
    <Button
        android:id="@+id/button_upload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Upload" />

</RelativeLayout>

There is no error but uploaded URL link is not properly working to access the uploaded image. Data schema

The uploaded image URL looks as ("com.google.android.gms.tasks.zzu@b72c6eb") given in schema of firebase. but perfect image URL link looks as "https://firebasestorage.googleapis.com/v0/b/rewabazar-a2258.appspot.com/o/products%2F1619256818173.jpg?alt=media&token=a3f4acd3-e0fc-49d9-8548-5e386bc2de84"

Answer 1

There are two major issues in your code. The first one, you are defining the following StorageReference object like so:

StorageReference fileReference = mStorageRef.child(System.currentTimeMillis() + "." + getFileExtension(mImageUri));

And right after that, you are using:

Task<Uri> url1 = fileReference.getDownloadUrl();

StorageReference's "getDownloadUrl()" method returns a Task object. Simply calling "toString()" on a such an object and then passing it to the Upload class constructor:

Upload upload = new Upload(mEditTextFileName.getText().toString().trim(), url1.toString());

Doesn't make any sense since the String representation of that object is not an actual URL, its and address in the memory, hence that:

com.google.android.gms.tasks.zzu@b72c6eb

And not :

https://firebasestorage.googleapis.com/v0/b/rewabazar-a2258.appspot.com/o/products%2F1619256818173.jpg?alt=media&token=a3f4acd3-e0fc-49d9-8548-5e386bc2de84

This is a recommended way for getting the download URL:

• How to get the download url from Firebase Storage?

The second issue is that the name of your fields in the database are different than the one in your class. See "mImageUrl" vs "imageUrl"? That is not correct, both names must match. You either change the name of the fields in the database to match the one in the class or you use an annotation in front of the getter:

@PropertyName("imageUrl")
public String getImageUrl() {
    return mImageUrl;
}

That's an example for a single property, but you should do the same thing also for the others.