How to upload photo from library in webview in android app

Question

I am using webview component on my android app. Users can load images from android photo library and show these images on a web page in the webview. How can I upload these image to my backend server from javascript?

Below is my java code to handle image chooser behavior:

setWebChromeClient(new WebChromeClient() {

            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                Intent intent = new Intent(Intent.ACTION_PICK);
                intent.setType("image/*");
                intent.setAction(Intent.ACTION_GET_CONTENT);
                Intent chooser = Intent.createChooser(intent, "Select Image");
                activity.startActivityForResult(chooser, ResultCode.CHOOSE_PHOTO_REQUEST);
                return false;
            }
        });

the above code will show image picker and when a user select an image, the onActivityResult will pass the selected image path to javascript as below:

       if (resultCode == Activity.RESULT_OK) {
            Uri imageUri = imageReturnedIntent.getData();
            Log.d("IMAGE", "choose image uri " + imageUri);
            String path = getRealPathFromURI(imageUri);
            Log.d("IMAGE", "choose image real path " + path);
            webView.loadUrl("javascript:choosePhotos('" + path + "')");
        }

      public String getRealPathFromURI(Uri contentUri) {
        Cursor cursor = null;
        try {
            String[] proj = {MediaStore.Images.Media.DATA};
            cursor = mainActivity.getContentResolver().query(contentUri, proj, null, null, null);
            int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
            cursor.moveToFirst();
            return cursor.getString(column_index);
        } finally {
            if (cursor != null) {
                cursor.close();
            }
        }
    }

in javascript, I can put the image path on a <img src=''/> tag to show the selected images. The path is something like this: '/storage/emulated/0/DCIM/Camera/IMG_20160808_200837.jpg'

It works fine here. But now I want to upload this image to my backend server. How can javascript handle this path: /storage/emulated/0/DCIM/Camera/IMG_20160808_200837.jpg.

Try this solution where you can execute java code from javascript i.e do the upload natively -- http://stackoverflow.com/questions/10389572/call-java-function-from-javascript-over-android-webview — Tasos, Sep 10 '16 at 14:13

score 0 · Answer 1 · answered Sep 10 '16 at 14:17

0

You Can use filePathCallback to pass the selected file to webview. Just create a global variable

ValueCallback filePathCallback;

and assign the parameter from onShowFileChooser() method to it. then you can use this callback in onActivityResult() to pass the selected file to webview as :

Uri results[] = new Uri[]{imageUri};

filePathCallback.onReceiveValue(results);

then on html you will get file at

answered Sep 10 '16 at 14:17

Govind Kulkarni

23
1
7

I can get the file uri in webview. My question is how to upload this file to server from javascript in webview. – Joey Yi Zhao Sep 11 '16 at 06:34
If you are using input type file in html like in the form, then you can simply submit the form, here **enctype** is imp. And you can simply upload form from ajax. refer http://stackoverflow.com/a/22621393/1938011 – Govind Kulkarni Sep 12 '16 at 03:29

How to upload photo from library in webview in android app

1 Answers1