Ashish Yadav
Ashish Yadav

Reputation: 543

How to send image when user is offline just like the text message in chat app with firebase?

So firebase has this offline capabilities.

So whenever I send any text message it is shown on the my device as soon as I click send. It works like a charm.

My problem is that it does not happen same when the I try to send images. Even when I am online the image first will get uploaded to Firebase Storage. Then image url will then get stored to firebase-database. And after that it is shown to me. This takes time depending upon the file size. Is it possible to show the image on device as soon as I send it and uploading happens in background?

I have an adapter class and retrieving the data inside recyclerView.

This is how I am adding image to the view (This is in the adapter class):

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
    switch (holder.getItemViewType()){
        case 1:
            //for text messages
            ViewHolder1 viewHolder1 = (ViewHolder1)holder;
            viewHolder1.Text.setText(messageList.get(position).getMessage());
            break;

        case 2:
            //for images
            ViewHolder2 viewHolder2 = (ViewHolder2)holder;
            Glide.with(viewHolder2.Image.getContext())
                    .load(messageList.get(position).getMessage())
                    .crossFade()
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .into(viewHolder2.Image);
            break;
    }
}

This is how I am uploading it (This is in Chat Activity class):

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

    if(requestCode == CHOOSE_IMAGE && resultCode == Activity.RESULT_OK && data!=null && data.getData()!=null){
        uriProfileImage = data.getData();
        final StorageReference profileImageRef = FirebaseStorage.getInstance().getReference("message/"+System.currentTimeMillis()+"jpg");
        if (uriProfileImage!=null){
            profileImageRef.putFile(uriProfileImage).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                @Override
                public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                    profileImageRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            Uri downloadUrl = uri;
                            profileImageUrl = downloadUrl.toString();

                            Map messageMap = new HashMap();
                            messageMap.put("Message", profileImageUrl);
                            messageMap.put("Type", 2);

                            Map messageUserMap = new HashMap();
                            messageUserMap.put(user_ref+"/"+push_id,messageMap);

                            mRootRef.updateChildren(messageUserMap, new DatabaseReference.CompletionListener() {
                                @Override
                                public void onComplete(@Nullable DatabaseError databaseError, @NonNull DatabaseReference databaseReference) {
                                    if (databaseError!=null){

                                    }
                                }
                            });
                        }
                    });
                }
            })

                    });
        }


    }
}

Hope I am clear. Any help will be appreciated.

Upvotes: 1

Views: 1263

Answers (1)

Jordi Bruin
Jordi Bruin

Reputation: 1588

When the user selects the image they want to upload, you can perform two actions simultaneously. First, start the upload to Storage, and second, get the image and add it to your view.

You can then give the user immediate feedback and show the image without it taking a roundtrip to and back from the server first.

Upvotes: 1

Related Questions