File chooser dialog not opening in android webview if "display:none"
android, android-webview, jquery
Solution
input file doesn't work if you use `display:none`
just put it outside the viewable area, for example with `position: absolute;left: -500px;`
Problem
Good morning developers Well I have made an android webview application, I m facing a little issue, I searched alot but couldn't found any valid solution. Ok. the problem is that. I have a php/Html code like this ``` <input type="file" name="banner_image" style="display:none;" id="banner_image" onChange="fileSelected('banner');" accept="image/*" /> ``` Notice: the `style="display:none;"` I m calling the onclick event of input field from onClick of a `div` via Jquery like this ``` <div class="profile-pic-txt" onClick="openFileDialog('profile');"> Click here to add Profile Picture <p>200px/200px</p> </div> ``` and here is my java-script openFileDialog() function ``` function openFileDialog(test) { $("#banner_image").click(); console.log("Test"); } ``` Its not opening my file chooser dialog. But when i remove this `display:none;` from my above code its just working fine. I tested this in iPhone its working fine in both conditions but in android webview its not invoking my file chooser dialog while keeping `display:none`. Question I have to make my browse button invisible from my webpage as its template/design requirement (`which I have done with display:none`) and in the last here is my android webview configuration code. ``` private void configureWebview() { webView.getSettings().setDefaultZoom(ZoomDensity.FAR); webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); webView.getSettings().setBuiltInZoomControls(true); webView.getSettings().setLoadWithOverviewMode(true); webView.getSettings().setCacheMode(MODE_APPEND); webView.getSettings().setUseWideViewPort(true); webView.getSettings().setRenderPriority(RenderPriority.HIGH); webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); webView.setWebViewClient(new MyWebViewClient()); webView.setWebChromeClient(new WebChromeClient() { @Override public boolean onConsoleMessage(ConsoleMessage cm) { Log.e("Console Webview", cm.message() + " -- From line " + cm.lineNumber() + " of " + cm.sourceId()); return true; } // For Android < 3.0 @SuppressWarnings("unused") public void openFileChooser(ValueCallback<Uri> uploadMsg) { uploadMessage = 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+ @SuppressWarnings("unused") public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) { uploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); MainActivity.this.startActivityForResult( Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE); } // For Android 4.1 @SuppressWarnings("unused") public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) { uploadMessage = 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); } }); } ``` Just repeating my problem: File chooser is not opening while keeping `display:none` in `<input name="banner_image" style="display:none;" id="banner_image" onChange="fileSelected('banner');" type="file" accept="image/*" />`