WEB LEARNERS

How to Enable Video, Image and File Upload in Android Webview App | Webview App Development Series Part 16

SHORIFA ISLAM(CST FROM HZNU, CHINA) June 27, 2021 8 Comments

Hi, Everyone! I have got many requests and comment about "File upload not working in android webview app", also "can not uploading pdf or video file in android webview app", you all have requested me to help you for solving the problem.

Today I will solve all the problems about "How to enable or support file uploading in android webview app", "How to allow any type file uploading such as pdf, ppt, audio, video, image, txt"? anything you will be able to upload in your webview android apps. Just follow my tutorial from beginning to end. In the previous video, I have showed you How to Enable Download in Android Webview App.

So, Let's start, First of all, you need to add 3 permission for "access camera, write in external storage and Internet" in your AndroidManifest.xml file.

Code:

After adding the permission, now need to move to the "MainActivity.java" file, now let's take 5 variable, which are:

Code:

Let's demonstrate, why we have taken these variable, we have taken a private static string file called "file_type", this is for storing file type we want to upload in our webview app, such as pdf, ppt, pptx, ppt, audio, video, image, doc, zip, RTF, txt, etc.

As we want to allow all types of these files uploading in our android webview app, so we have defined file_type = "*/*". "*/*" this means it will allow all types of file uploading in the android webview app.

cam_file_data: This String variable "cam_file_data" for storing camera file information.

ValueCallback<Uri> file_data: We have taken the "ValueCallback" variable, we have named it "file_data", this will store data after selecting the file.

ValueCallback<Uri[]> file_path: Another "ValueCallback" variable, we named it file_path, this will store file location.

Now let's move to the "onCreate" method, and will write a function method called onShowFileChooser in our setWebChromeClient, and all the necessary code will write on this function, See the Below Code:

Code:

 /*-- handling input[type="file"] requests for android API 21+ --*/
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {

                if(file_permission() && Build.VERSION.SDK_INT >= 21) {
                    file_path = filePathCallback;
                    Intent takePictureIntent = null;
                    Intent takeVideoIntent = null;

                    boolean includeVideo = false;
                    boolean includePhoto = false;

                    /*-- checking the accept parameter to determine which intent(s) to include --*/
  
                    paramCheck:
                    for (String acceptTypes : fileChooserParams.getAcceptTypes()) {
                        String[] splitTypes = acceptTypes.split(", ?+"); 
  /*-- although it's an array, it still seems to be the whole value; split it out into chunks so that we can detect multiple values --*/
                        for (String acceptType : splitTypes) {
                            switch (acceptType) {
                                case "*/*":
                                  includePhoto = true;
                                   includeVideo = true;
                                   break paramCheck;
                                case "image/*":
                                    includePhoto = true;
                                    break;
                                case "video/*":
                                    includeVideo = true;
                                    break;
                            }
                        }
                    }

                    if (fileChooserParams.getAcceptTypes().length == 0) {   
  
 /*-- no `accept` parameter was specified, allow both photo and video --*/
  
                        includePhoto = true;
                        includeVideo = true;
                    }

                    if (includePhoto) {
                        takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                        if (takePictureIntent.resolveActivity(MainActivity.this.getPackageManager()) != null) {
                            File photoFile = null;
                            try {
                                photoFile = create_image();
                                takePictureIntent.putExtra("PhotoPath", cam_file_data);
                            } catch (IOException ex) {
                                Log.e(TAG, "Image file creation failed", ex);
                            }
                            if (photoFile != null) {
                                cam_file_data = "file:" + photoFile.getAbsolutePath();
                                takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));
                            } else {
                                cam_file_data = null;
                                takePictureIntent = null;
                            }
                        }
                    }

                    if (includeVideo) {
                        takeVideoIntent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
                        if (takeVideoIntent.resolveActivity(MainActivity.this.getPackageManager()) != null) {
                            File videoFile = null;
                            try {
                                videoFile = create_video();
                            } catch (IOException ex) {
                                Log.e(TAG, "Video file creation failed", ex);
                            }
                            if (videoFile != null) {
                                cam_file_data = "file:" + videoFile.getAbsolutePath();
                                takeVideoIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(videoFile));
                            } else {
                                cam_file_data = null;
                                takeVideoIntent = null;
                            }
                        }
                    }

                    Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
                    contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
                   contentSelectionIntent.setType(file_type);


                    Intent[] intentArray;
                    if (takePictureIntent != null && takeVideoIntent != null) {
                        intentArray = new Intent[]{takePictureIntent, takeVideoIntent};
                    } else if (takePictureIntent != null) {
                        intentArray = new Intent[]{takePictureIntent};
                    } else if (takeVideoIntent != null) {
                        intentArray = new Intent[]{takeVideoIntent};
                    } else {
                        intentArray = new Intent[0];
                    }

                    Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
                    chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
                    chooserIntent.putExtra(Intent.EXTRA_TITLE, "File chooser");
                    chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);
                    startActivityForResult(chooserIntent, file_req_code);
                    return true;
                } else {
                    return false;
                }
            }

Now we will write a function "onActivityResult" for selecting the file from the Camera or SD card in android webview app. This function will be outside of "onCreate" method. See the Below Code:

Code:

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent){
        super.onActivityResult(requestCode, resultCode, intent);
        if(Build.VERSION.SDK_INT >= 21){
            Uri[] results = null;

            /*-- if file request cancelled; exited camera. we need to send null value to make future attempts workable --*/
            if (resultCode == Activity.RESULT_CANCELED) {
                file_path.onReceiveValue(null);
                return;
            }

            /*-- continue if response is positive --*/
            if(resultCode== Activity.RESULT_OK){
                if(null == file_path){
                    return;
                }
                ClipData clipData;
                String stringData;

                try {
                    clipData = intent.getClipData();
                    stringData = intent.getDataString();
                }catch (Exception e){
                    clipData = null;
                    stringData = null;
                }
                if (clipData == null && stringData == null && cam_file_data != null) {
                    results = new Uri[]{Uri.parse(cam_file_data)};
                }else{
                    if (clipData != null) { 
                        final int numSelectedFiles = clipData.getItemCount();
                        results = new Uri[numSelectedFiles];
                        for (int i = 0; i < clipData.getItemCount(); i++) {
                            results[i] = clipData.getItemAt(i).getUri();
                        }
                    } else {
                        try {
                            Bitmap cam_photo = (Bitmap) intent.getExtras().get("data");
                            ByteArrayOutputStream bytes = new ByteArrayOutputStream();
                            cam_photo.compress(Bitmap.CompressFormat.JPEG, 100, bytes);
                            stringData = MediaStore.Images.Media.insertImage(this.getContentResolver(), cam_photo, null, null);
                        }catch (Exception ignored){}

                        results = new Uri[]{Uri.parse(stringData)};
                    }
                }
            }

            file_path.onReceiveValue(results);
            file_path = null;
        }else{
            if(requestCode == file_req_code){
                if(null == file_data) return;
                Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
                file_data.onReceiveValue(result);
                file_data = null;
            }
        }
    }

Now we will write function called "onConfigurationChanged"

Code:

Now we will write a function "file_permission" for checking and asking for required file permissions.

Code:

We have taken a variable "photoFile" in the "onActivityResult" function, there we have stored a function called "create_image()". Now we will create that function.

Code:

Now we will write function for video file

Code:

We have finished the coding. Now Let's run our project and check whether any type of file is uploading in our android webview app or not.

Figure: How to enable file upload in webview android

As you can see from the above image, I have successfully uploaded an audio MP3 file, MP4 video file, and image. This way you will able to do android webview upload files, upload all types of files, pdf, ppt, audio, video, image, txt etc.

In the next tutorial, I will show you How to enable multiple file upload in the Android webview app.