CODEWITHSUNDEEP
javascriptandroidjspwebview
Fresher
Fresher

Reputation: 892

Unable to run show image preview on android webview?

Firstly this may sound like a duplicate question but i was unable to get any solutions via previous posted questions.I have a jsp page through which i am selecting images from PC and showing preview of that image which is working fine on chrome browser of my android phone also.But when i run it on WEBVIEW document.getElementById.click() function not working so i am unable to get image preview.

This is my JSP page:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">    </script>
    <script>
        function img_prvw(id1,id2)/*******************show preview of  image*******************/
{

var oFiles = document.getElementById(id1).files;
var valid_extensions = /(.jpg|.jpeg|.png)$/i;
if(!(valid_extensions.test(document.getElementById(id1).files[0].name)))
{
document.getElementById('er').innerHTML="Select jpg or png image";
}
else
{
var reader = new FileReader();
reader.readAsDataURL(oFiles[0]);
reader.onload=
function (e) {
document.getElementById(id2).src=e.target.result;
};
}
}

        </script>
 </head>
 <body>
  <input type="file" style="display: none;" id="advrts_img" name="advrts_img" onchange="img_prvw('advrts_img','advrts_img_prvw')">
<img src="images/img_place.png" id="advrts_img_prvw" alt="" class="cursor margin_top10" style="width:100px;height:100px" onClick="document.getElementById('advrts_img').click()">
 </body>
 </html>

This is my android WebView code:

package com.example.sample_webview;

import android.app.Activity;
import android.content.Intent;
import android.content.res.Configuration;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends Activity {
/** Called when the activity is first created. */

WebView web;

private ValueCallback<Uri> mUploadMessage;
private final static int FILECHOOSER_RESULTCODE = 1;

@Override
protected void onActivityResult(int requestCode, int resultCode,
        Intent intent) {
    if (requestCode == FILECHOOSER_RESULTCODE) {
        if (null == mUploadMessage)
            return;
        Uri result = intent == null || resultCode != RESULT_OK ? null
                : intent.getData();
        mUploadMessage.onReceiveValue(result);
        mUploadMessage = null;
    }
}

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

    web = (WebView) findViewById(R.id.wView);

    web = new WebView(this);
    web.getSettings().setJavaScriptEnabled(true);
    web.loadUrl("http://minkme.org/minkmeuser/image_preview1.jsp");
    web.setWebViewClient(new myWebClient());
    web.setWebChromeClient(new WebChromeClient() {
        // The undocumented magic method override
        // Eclipse will swear at you if you try to put @Override here
        // For Android 3.0+
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {

            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Chooser"),
                    FILECHOOSER_RESULTCODE);

        }

        // For Android 3.0+
        public void openFileChooser(ValueCallback uploadMsg,
                String acceptType) {
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Browser"),
                    FILECHOOSER_RESULTCODE);
        }

        // For Android 4.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg,
                String acceptType, String capture) {
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Chooser"),
                    MainActivity.FILECHOOSER_RESULTCODE);

        }

    });

    setContentView(web);

}

public class myWebClient extends WebViewClient {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // TODO Auto-generated method stub
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // TODO Auto-generated method stub

        view.loadUrl(url);
        return true;

    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // TODO Auto-generated method stub
        super.onPageFinished(view, url);

    }
}

// flipscreen not loading again
@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
}

// To handle "Back" key press event for WebView to go back to previous
// screen.
/*
 * @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if
 * ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) { web.goBack();
 * return true; } return super.onKeyDown(keyCode, event); }
 */
     }

I just want to browse images from android phone using input type="file".

Upvotes: 4

Views: 2253

Answers (1)

Vink
Vink

Reputation: 1277

in short : look over here to your input file Input file in a webview

After some time and some test, i have found that document.getElementById.click work perfectly well. i have test with the following change

test.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <script src="jquery-1.11.1.min.js">    </script>
    <script>

        function img_prvw(id1,id2)/*******************show preview of  image*******************/
        {
            console.log("Call of img_prvw");
            var oFiles = document.getElementById(id1).files;
            var valid_extensions = /(.jpg|.jpeg|.png)$/i;
            if(!(valid_extensions.test(document.getElementById(id1).files[0].name)))
            {
                document.getElementById('er').innerHTML="Select jpg or png image";
            }
            else
            {
                var reader = new FileReader();
                reader.readAsDataURL(oFiles[0]);
                reader.onload=
                        function (e) {
                            document.getElementById(id2).src=e.target.result;
                        };
            }
        }

        function onAdvrtsImgPrvwClick() {
            console.log('Clickevent');
            document.getElementById('advrts_img').click();
        }

    </script>
</head>
<body>
<input type="file" style="display: none;" id="advrts_img" name="advrts_img" onclick="console.log('click on input');" onchange="img_prvw('advrts_img','advrts_img_prvw')">
<img src="images/img_place.png" id="advrts_img_prvw" alt="" class="cursor margin_top10" style="width:100px;height:100px" onClick="onAdvrtsImgPrvwClick()">
</body>
</html>

MainActivity.java

public class MainActivity extends Activity {

private WebView mWebview;
static final String TAG = "MainActivity";

@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebview = (WebView) findViewById(R.id.webView1);

    mWebview.getSettings().setJavaScriptEnabled(true); // enable javascript

    final Activity activity = this;

    mWebview.setWebViewClient(new WebViewClient() {
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            Toast.makeText(activity, description, Toast.LENGTH_SHORT)
                    .show();
        }
    });

    mWebview.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onConsoleMessage(ConsoleMessage cm)
        {
            String msg = cm.message() + " -- From line " + cm.lineNumber() + " of " + cm.sourceId();
            switch (cm.messageLevel()) {
                case ERROR:
                    Log.e(TAG, msg);
                    break;
                case LOG:
                case TIP:
                    Log.i(TAG, msg);
                    break;
                case WARNING:
                    Log.w(TAG, msg);
                    break;
                case DEBUG:
                default:
                    Log.d(TAG, msg);
                    break;
            }

            return true;
        }
    });


    mWebview.loadUrl("file:///android_asset/test.html");
    //setContentView(mWebview);

}
}

And it's appear that the console show the message 'click on input', so it have been correctly call, but it's the on change that is not called properly.

Upvotes: 1

Related Questions