Storing and Displaying Image using Glide & FireBas

Question

I am trying to upload and display the profile picture using Glide & Firebase. Upload part is successfully working. But if i try to load that image from Database its showing blank.My motive is to load the profile_image while the user entered into the activity once and he can tap on the existing image and change that for his wish.

My code

public class User extends AppCompatActivity {

    private ImageView imageView;
    private Uri filePath;
    private final int PICK_IMAGE_REQUEST = 71;
    StorageReference storageReference;

    private void loadImage(){

        Bundle bundle = getIntent().getExtras();
        assert bundle != null;
        final String retrievedName = bundle.getString("Name");

        // Reference to an image file in Cloud Storage
        StorageReference storageReference  = FirebaseStorage.getInstance().getReference().child(retrievedName).child("images/profile_image");
        imageView = findViewById(R.id.profile_image);

    // Load the image using Glide
        Glide.with(User.this.getApplicationContext())
                .load(storageReference)
                .into(imageView );
    }


    private void uploadImage() {

        if(filePath != null)
        {

            Bundle bundle = getIntent().getExtras();
            assert bundle != null;
            final String retrievedName = bundle.getString("Name");

            storageReference = FirebaseStorage.getInstance().getReference();

            StorageReference ref = storageReference.child(retrievedName).child("images/profile_image");
            ref.putFile(filePath)
                    .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                        @Override
                        public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                            Toast.makeText(User.this, "Uploaded", Toast.LENGTH_SHORT).show();
                        }
                    })
                    .addOnFailureListener(new OnFailureListener() {
                        @Override
                        public void onFailure(@NonNull Exception e) {
                            Toast.makeText(User.this, "Failed "+e.getMessage(), Toast.LENGTH_SHORT).show();
                        }
                    });
        }
    }

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

    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 )
        {
            filePath = data.getData();
            try {
                Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath);
                imageView.setImageBitmap(bitmap);

                uploadImage();
            }
            catch (IOException e)
            {
                e.printStackTrace();
            }
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_user);
        imageView = findViewById(R.id.profile_image);

        loadImage();

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                    chooseImage();
            }
        });
    }

}

Answer 1

Finally I got the solution.

At upload part, I added the url in Realtime database

url_db = FirebaseDatabase.getInstance().getReference().child(retrievedName).child("Url");
        StorageReference ref = FirebaseStorage.getInstance().getReference().child(retrievedName).child("images/profile_image");
        ref.putFile(filePath)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        @SuppressWarnings("VisibleForTests") Uri downloadUrl =
                                taskSnapshot.getDownloadUrl();
                        uploadImageUrl = downloadUrl.toString();

                        url_db.setValue(uploadImageUrl);
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                        Toast.makeText(User.this, "Failed " + e.getMessage(), Toast.LENGTH_SHORT).show();
                    }
                });

While loading that I used this Url from Database and used in Glide

imageView = findViewById(R.id.profile_image);

    url_db = FirebaseDatabase.getInstance().getReference().child(retrievedName).child("Url");

    url_db.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {

            String url = dataSnapshot.getValue(String.class);

            if(url!= null){

                imageLoad.setVisibility(View.VISIBLE);


                Glide.with( User.this)
                        .load(url)
                        .into(imageView);

                imageLoad.setVisibility(View.INVISIBLE);

            }

        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });

Thanks for the support guys.

Answer 2

As is told in the official firebase documentation HERE you should getDownloadURL() of your photo in order to pass it to your glide library, this way glide will show up your image

in this line add getDownloadUrl();

    StorageReference ref = storageReference.child(retrievedName).child("images/profile_image").getDownloadUrl();

and then just call your image with glide

// Load the image using Glide
Glide.with(this /* context */)
        .using(new FirebaseImageLoader())
        .load(ref)
        .into(imageView);

in order to use FirebaseImageLoader() just remember to add this in your gradle

dependencies {
    // FirebaseUI Storage only
    compile 'com.firebaseui:firebase-ui-storage:0.6.0'
}

Also follow up THIS GitHub link on how to load an image from a StorageReference

Another easier way is getting that DownloadUrl and use it in glide

ref.putFile(filePath)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                         @SuppressWarnings("VisibleForTests") Uri downloadUrl = 
                     taskSnapshot.getDownloadUrl();
                    uploadImageUrl = downloadUrl.toString();
                Toast.makeText(getApplicationContext(), "url to your file..."+uploadImageUrl, Toast.LENGTH_SHORT).show();
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                        Toast.makeText(User.this, "Failed "+e.getMessage(), Toast.LENGTH_SHORT).show();
                    }
                });

uploadImageUrl is a global variable private String uploadImageUrl;

And then just load that image url with glide into your imageView

Glide.with(this /* your_context */)
    .load(uploadImageUrl)
    .centerCrop()
    .into(imageView)