How to Enable File Upload in Android Webview App | Webview App Development Website to app Convert Part 11

 

 

by TS Durjoy

How to Enable File Upload in Android Webview App? That's what most of the people search in the google and youtube. Because this is the most complicated part of the webview app development.

 

Are you stuck with the problem "How to allow file upload and download in webview" also? Don't worry, Today I am going to show you how to write the code in android studio to support file upload in android webview app. Let's Start.

 

 

 

First of all, You need to give 3 permission in AndoidManifest.xml. Those are given below:

Code:

Top of Form

<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Bottom of Form

After that, you need to write code in MainActivity.java file. You need to take some global variable for opening file chooser with camera option, see below code:

Code:

Top of Form

public Context context; private static final String TAG = MainActivity.class.getSimpleName(); private static final int FILECHOOSER_RESULTCODE = 1; private ValueCallback<uri> mUploadMessage; private Uri mCapturedImageURI = null; // the same for Android 5.0 methods only private ValueCallback<Uri[]> mFilePathCallback; private String mCameraPhotoPath;

Bottom of Form

After that, you need to write code for showing "file chooser". Just copy the below code and paste it into your WebChromeClient function. By the way, you can see below code contain "web" is my variable name, I have retrieved and stored my Webview from activity_main.xml.you need to replace that variable "web" with your variable name.

Code:

Top of Form

// for Lollipop, all in one public boolean onShowFileChooser( WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) { if (mFilePathCallback != null) { mFilePathCallback.onReceiveValue(null); } mFilePathCallback = filePathCallback; Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (takePictureIntent.resolveActivity(getPackageManager()) != null) { // create the file where the photo should go File photoFile = null; try { photoFile = createImageFile(); takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath); } catch (IOException ex) { // Error occurred while creating the File Log.e(TAG, "Unable to create Image File", ex); } // continue only if the file was successfully created if (photoFile != null) { mCameraPhotoPath = "file:" + photoFile.getAbsolutePath(); takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile)); } else { takePictureIntent = null; } } Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT); contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE); contentSelectionIntent.setType("image/*"); Intent[] intentArray; if (takePictureIntent != null) { intentArray = new Intent[]{takePictureIntent}; } else { intentArray = new Intent[0]; } Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER); chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent); chooserIntent.putExtra(Intent.EXTRA_TITLE, getString(R.string.image_chooser)); chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray); startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE); return true; } // creating image files (Lollipop only) private File createImageFile() throws IOException { File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "DirectoryNameHere"); if (!imageStorageDir.exists()) { imageStorageDir.mkdirs(); } // create an image file name imageStorageDir = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg"); return imageStorageDir; } // openFileChooser for Android 3.0+ public void openFileChooser(ValueCallback<uri> uploadMsg, String acceptType) { mUploadMessage = uploadMsg; try { File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "DirectoryNameHere"); if (!imageStorageDir.exists()) { imageStorageDir.mkdirs(); } File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg"); mCapturedImageURI = Uri.fromFile(file); // save to the private variable final Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE); captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, mCapturedImageURI); // captureIntent.putExtra(MediaStore.EXTRA_SCREEN_ORIENTATION, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); Intent chooserIntent = Intent.createChooser(i, getString(R.string.image_chooser)); chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent}); startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE); } catch (Exception e) { Toast.makeText(getBaseContext(), "Camera Exception:" + e, Toast.LENGTH_LONG).show(); } } // openFileChooser for Android < 3.0 public void openFileChooser(ValueCallback<Uri> uploadMsg) { openFileChooser(uploadMsg, ""); } // openFileChooser for other Android versions /* may not work on KitKat due to lack of implementation of openFileChooser() or onShowFileChooser() https://code.google.com/p/android/issues/detail?id=62220 however newer versions of KitKat fixed it on some devices */ public void openFileChooser(ValueCallback<uri> uploadMsg, String acceptType, String capture) { openFileChooser(uploadMsg, acceptType); }

Bottom of Form

Then you need to write Override function after "onCreate", See below code.

Code:

Top of Form

// return here when file selected from camera or from SD Card @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { // code for all versions except of Lollipop if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) { if (requestCode == FILECHOOSER_RESULTCODE) { if (null == this.mUploadMessage) { return; } Uri result = null; try { if (resultCode != RESULT_OK) { result = null; } else { // retrieve from the private variable if the intent is null result = data == null ? mCapturedImageURI : data.getData(); } } catch (Exception e) { Toast.makeText(getApplicationContext(), "activity :" + e, Toast.LENGTH_LONG).show(); } mUploadMessage.onReceiveValue(result); mUploadMessage = null; } } // end of code for all versions except of Lollipop // start of code for Lollipop only if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { if (requestCode != FILECHOOSER_RESULTCODE || mFilePathCallback == null) { super.onActivityResult(requestCode, resultCode, data); return; } Uri[] results = null; // check that the response is a good one if (resultCode == Activity.RESULT_OK) { if (data == null || data.getData() == null) { // if there is not data, then we may have taken a photo if (mCameraPhotoPath != null) { results = new Uri[]{Uri.parse(mCameraPhotoPath)}; } } else { String dataString = data.getDataString(); if (dataString != null) { results = new Uri[]{Uri.parse(dataString)}; } } } mFilePathCallback.onReceiveValue(results); mFilePathCallback = null; } // end of code for Lollipop only }

Bottom of Form

Don't forget to write this line of code in your "strings.xml" file.

Code:

Top of Form

<string name="image_chooser">File Chooser</string>

Bottom of Form

Whenever you will paste these codes in your project you see lots of red words. you need to click on that red word then press "alt+Enter" then it will import class automatically. Or you can just copy below import class and paste in your import section. all the Error will go.

Code:

Top of Form

//import class for Uploading part start import android.app.Activity; import android.content.Context; import android.content.Intent; import android.net.Uri; import android.os.Build; import android.os.Environment; import android.os.Parcelable; import android.provider.MediaStore; import android.util.Log; import android.webkit.ValueCallback; import android.widget.Toast; import java.io.File; import java.io.IOException; import android.webkit.WebChromeClient; //import class for Uploading part End

Bottom of Form

After paste above import class, you will see almost all the error gone, only 5 error still there, they are "uri", "uploadMsg" and "result". you need to click on "result" then will show suggestion you need to click on that, then all the error will go. See below picture:

So, the whole final code will be in MainActivty.java is:

Code:

Top of Form

package com.ss.tweetpost; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; //import class for Uploading part start import android.app.Activity; import android.content.Context; import android.content.Intent; import android.net.Uri; import android.os.Build; import android.os.Environment; import android.os.Parcelable; import android.provider.MediaStore; import android.util.Log; import android.webkit.ValueCallback; import android.widget.Toast; import java.io.File; import java.io.IOException; import android.webkit.WebChromeClient; //import class for Uploading part End public class MainActivity extends AppCompatActivity { private WebView web; String webUrl = "https://tweettools.trickssoftware.com/"; public Context context; private static final String TAG = MainActivity.class.getSimpleName(); private static final int FILECHOOSER_RESULTCODE = 1; private ValueCallback<uri> mUploadMessage; private Uri mCapturedImageURI = null; // the same for Android 5.0 methods only private ValueCallback<Uri[]> mFilePathCallback; private String mCameraPhotoPath; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); web = (WebView) findViewById(R.id.myweb); web.loadUrl(webUrl); WebSettings mywebsettings = web.getSettings(); mywebsettings.setJavaScriptEnabled(true); web.setWebViewClient(new WebViewClient()); //improve webview performance web.getSettings().setLoadsImagesAutomatically(true); web.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH); web.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); web.getSettings().setAppCacheEnabled(true); web.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); mywebsettings.setDomStorageEnabled(true); mywebsettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS); mywebsettings.setUseWideViewPort(true); mywebsettings.setSavePassword(true); mywebsettings.setSaveFormData(true); mywebsettings.setEnableSmoothTransition(true); //enable upload part web.setWebChromeClient(new WebChromeClient() { // for Lollipop, all in one public boolean onShowFileChooser( WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) { if (mFilePathCallback != null) { mFilePathCallback.onReceiveValue(null); } mFilePathCallback = filePathCallback; Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (takePictureIntent.resolveActivity(getPackageManager()) != null) { // create the file where the photo should go File photoFile = null; try { photoFile = createImageFile(); takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath); } catch (IOException ex) { // Error occurred while creating the File Log.e(TAG, "Unable to create Image File", ex); } // continue only if the file was successfully created if (photoFile != null) { mCameraPhotoPath = "file:" + photoFile.getAbsolutePath(); takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile)); } else { takePictureIntent = null; } } Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT); contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE); contentSelectionIntent.setType("image/*"); Intent[] intentArray; if (takePictureIntent != null) { intentArray = new Intent[]{takePictureIntent}; } else { intentArray = new Intent[0]; } Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER); chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent); chooserIntent.putExtra(Intent.EXTRA_TITLE, getString(R.string.image_chooser)); chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray); startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE); return true; } // creating image files (Lollipop only) private File createImageFile() throws IOException { File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "DirectoryNameHere"); if (!imageStorageDir.exists()) { imageStorageDir.mkdirs(); } // create an image file name imageStorageDir = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg"); return imageStorageDir; } // openFileChooser for Android 3.0+ public void openFileChooser(ValueCallback<uri> uploadMsg, String acceptType) { mUploadMessage = uploadMsg; try { File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "DirectoryNameHere"); if (!imageStorageDir.exists()) { imageStorageDir.mkdirs(); } File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg"); mCapturedImageURI = Uri.fromFile(file); // save to the private variable final Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE); captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, mCapturedImageURI); // captureIntent.putExtra(MediaStore.EXTRA_SCREEN_ORIENTATION, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); Intent chooserIntent = Intent.createChooser(i, getString(R.string.image_chooser)); chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent}); startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE); } catch (Exception e) { Toast.makeText(getBaseContext(), "Camera Exception:" + e, Toast.LENGTH_LONG).show(); } } // openFileChooser for Android < 3.0 public void openFileChooser(ValueCallback<Uri> uploadMsg) { openFileChooser(uploadMsg, ""); } // openFileChooser for other Android versions /* may not work on KitKat due to lack of implementation of openFileChooser() or onShowFileChooser() https://code.google.com/p/android/issues/detail?id=62220 however newer versions of KitKat fixed it on some devices */ public void openFileChooser(ValueCallback<uri> uploadMsg, String acceptType, String capture) { openFileChooser(uploadMsg, acceptType); } }); } // return here when file selected from camera or from SD Card @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { // code for all versions except of Lollipop if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) { if (requestCode == FILECHOOSER_RESULTCODE) { if (null == this.mUploadMessage) { return; } Uri result = null; try { if (resultCode != RESULT_OK) { result = null; } else { // retrieve from the private variable if the intent is null result = data == null ? mCapturedImageURI : data.getData(); } } catch (Exception e) { Toast.makeText(getApplicationContext(), "activity :" + e, Toast.LENGTH_LONG).show(); } mUploadMessage.onReceiveValue(result); mUploadMessage = null; } } // end of code for all versions except of Lollipop // start of code for Lollipop only if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { if (requestCode != FILECHOOSER_RESULTCODE || mFilePathCallback == null) { super.onActivityResult(requestCode, resultCode, data); return; } Uri[] results = null; // check that the response is a good one if (resultCode == Activity.RESULT_OK) { if (data == null || data.getData() == null) { // if there is not data, then we may have taken a photo if (mCameraPhotoPath != null) { results = new Uri[]{Uri.parse(mCameraPhotoPath)}; } } else { String dataString = data.getDataString(); if (dataString != null) { results = new Uri[]{Uri.parse(dataString)}; } } } mFilePathCallback.onReceiveValue(results); mFilePathCallback = null; } // end of code for Lollipop only } @Override public void onBackPressed() { if(web.canGoBack()){ web.goBack(); } else { super.onBackPressed(); } } }

Bottom of Form

In conclusion, we have finished our coding for our Webview App. Now we will run our project on Emulator. As you can see in my screenshot, it's working perfectly.

By the way, If you face any problem, let us know in the comment box below. We will try our best to solve your problem. Thanks.