Upload Image with a Text (connected) to Firebase Storage

Question

I upload an image to Firebase Storage with Android. I have an app which send image immediately after captured a photo.

But I would like to create an app which show a photo in ImageView before sending. I'd like to write some text under the photo and next, upload both of them.

Which tools should I use to do this? I've Picasso to download from Storage. But I can't manage how to show an ImageView after capturing a photo, next write some text(like name or description) and send it to Firebase. The second challenge is how to show particular text with this image?

IMAGE <-> TEXT.

In Firebase Storage I don't see some field to store image with a text.

MainActivity.java:

 private ProgressDialog mProgress;
    private Bitmap bitmap;
    private Button mUploadBtn;
    private Button mSendBtn;
    private EditText mEditText;
    private ImageView mImageView;
    Uri picUri;

    private StorageReference mStorage;



    private static final int CAMERA_REQUEST_CODE = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


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

        mEditText = (EditText) findViewById(R.id.editText);

        mSendBtn = (Button) findViewById(R.id.sendBtn);
        mUploadBtn = (Button) findViewById(R.id.uploadBtn);
        mImageView = (ImageView) findViewById(R.id.imageView);

        mProgress = new ProgressDialog(this);

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

                Intent i = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);

                File file=getOutputMediaFile(1);
                picUri = Uri.fromFile(file); // create
                i.putExtra(MediaStore.EXTRA_OUTPUT,picUri); // set the image file

                startActivityForResult(i, CAMERA_REQUEST_CODE);
            }
        });
    }

    public void UploadWithText(){

        String name = mEditText.getText().toString().trim();

    }


    /** Create a File for saving an image */
    private  File getOutputMediaFile(int type){
        File mediaStorageDir = new File(Environment.getExternalStoragePublicDirectory(
                Environment.DIRECTORY_PICTURES), "MyApplication");

        /**Create the storage directory if it does not exist*/
        if (! mediaStorageDir.exists()){
            if (! mediaStorageDir.mkdirs()){
                return null;
            }
        }

        /**Create a media file name*/
        String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
        File mediaFile;
        if (type == 1){
            mediaFile = new File(mediaStorageDir.getPath() + File.separator +
                    "IMG_"+ timeStamp + ".png");
        } else {
            return null;
        }

        return mediaFile;
    }


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


        if(requestCode == CAMERA_REQUEST_CODE && resultCode == RESULT_OK ) {

            mProgress.setMessage("Uploading Image...");
            mProgress.show();


            Uri uri = picUri;


            StorageReference filepath = mStorage.child("Photos").child(uri.getLastPathSegment());


            filepath.putFile(uri).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                @Override
                public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {

                    mProgress.dismiss();

                    Uri downloadUri = taskSnapshot.getDownloadUrl();

                    Picasso.with(MainActivity.this).load(downloadUri).fit().centerCrop().into(mImageView);

                    Toast.makeText(MainActivity.this, "Uploaded Successfully.", Toast.LENGTH_LONG).show();
                }
            });
        }
    }

Maybe there is a way that I can send the image to Firebase Storage but a Text(description) is sending to Database with a Name field(from Firebase Storage) and with this I can recognize which Text belongs to a particular image?

Could somebody help me to resolve this challenge?

Regards

Answer 1

I can only answer broadly, since there's a bit too much code to answer specifically without doing it for you. In general, there are few ways to do this:

• Add text to the image file itself, upload the new image with changes made
• Store text as an image attribute, upload the file and save attributes elsewhere
  • You can either store the data in the Realtime Database, or
  • You can store the data in Storage file metadata (assuming pairs)