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

score 0 · Answer 1 · answered Oct 24 '16 at 16:46

0

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)

answered Oct 24 '16 at 16:46

Mike McDonald

15,609
2
46
49

How could I add text to the image file itself? In Firebase docs I can't find properly explanation of your idea. You think that I could download image url, and pass it with a text to database? And this is way how to recognize which text belongs to properly url? – gryzek Oct 25 '16 at 09:35
Unfortunately, our docs aren't able to capture use case specific explanations--there are too many possibilities for us to capture them in detail. If you're aiming for the first, I suggest finding a library that does the image modification, this SO post seems to have some good info: http://stackoverflow.com/questions/5459701/how-can-i-watermark-an-image-in-java. If you're aiming for the second, which is possibly easier, you'll need to store the location of the text as well as other attributes of the text (color, size, etc.) so you can put it on the image. – Mike McDonald Oct 25 '16 at 15:33

Upload Image with a Text (connected) to Firebase Storage

1 Answers1