Loading an image from local android storage to WebView

Issue

Is it possible to load a picture to the WebView from the local android phone storage ? Basically what I'm trying to do is, take a picture, then display that picture inside the WebView (like a preview picture) then after filling more information, upload that picture with whole data to the database. Everything is in android studio Java code, the WebView are obviously .html files which I load from the assets folder.

I was thinking maybe I need to create an <img id="image"></img> then get the ID somehow ? But how do I store the picture inside even if I manage to get the ID ?

I've done all the camera stuff, so I can open the camera (through my WebView) and take a picture, the picture saves inside the path which I do know and I know the name of the picture. Also I can currently select the picture from the phone, but the thing is it only selects and does not do anything, so the selection is useless.

If You need any code, I'll edit.

Solution

So I found a solution to what I wanted to do and I'm posting an answer here if anyone someday wonders into this post and wants to know the solution.

Basically after taking a picture I call the javascript function which puts the taken image inside my .html file between <img></img> tags as the source. This is my onActivityResult in MainActivity.java:

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == PICK_IMAGE && resultCode == Activity.RESULT_OK) {
            //Getting the full image path of the image taken
            final String imagePath = "file://"+ currentPhotoPath;
            webView.post(new Runnable() {
                @Override
                public void run() {
                    webView.evaluateJavascript("postImage('" + imagePath + "')", null);
                }
            });
            getLocation();
            if (data == null) {
                //Display an error
                Log.d("performClick", "Error: data == null");
                return;
            }
        }
    }

What it does is it calls the javascript function postImage and passes imagePath as a parameter and the function in my hello.js file is:

function postImage(imagePath){
    document.body.innerHTML = "<img src=\""+ imagePath + "\">";
}

Now once I take the picture it appears on my WebView as an image without needing to reload the page or loading another URL with only the image.

Answered By - Elvis