'Xamarin Forms Android WebView Image Upload not working

I want to create mobile application using xamarin forms webview android that can upload file images. But every time I add image file and save it, the model returns null and I don't know how to solve.

this is my AndroidManifest:

 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
 android:versionCode="1" android:versionName="1.0" 
 package="com.companyname.pcartnewmobile" android:installLocation="auto">
 <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="30" />
 <application android:label="PCartNewMobile.Android" android:theme="@style/MainTheme" 
 android:debuggable="true">
 <provider android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
   <meta-data android:name="android.support.FILE_PROVIDER_PATHS" 
    android:resource="@xml/filepaths"></meta-data>
 </provider>
 </application>
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 </manifest>

this is the MainActivity:

 namespace PCartNewMobile.Droid
 {
     [Activity(Label = "PCartNewMobile", Icon = "@mipmap/icon", Theme = 
        "@style/MainTheme", MainLauncher = true, ConfigurationChanges = 
            ConfigChanges.ScreenSize | ConfigChanges.Orientation | 
            ConfigChanges.UiMode | ConfigChanges.ScreenLayout | 
            ConfigChanges.SmallestScreenSize )]
     public class MainActivity : 
             global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
     {
         protected override void OnCreate(Bundle savedInstanceState)
         {
             base.OnCreate(savedInstanceState);
             CrossCurrentActivity.Current.Init(this, savedInstanceState);
             Xamarin.Essentials.Platform.Init(this, savedInstanceState);
             global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
        
             LoadApplication(new App());
         }
    
    public override void OnRequestPermissionsResult(int requestCode, string[] 
    permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
    {
        Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, 
        permissions, grantResults);
        base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        
      Plugin.Permissions.PermissionsImplementation.Current.OnRequestPermissions
                  Result(requestCode, permissions, grantResults);  
         }
      }
   }


Solution 1:[1]

To figure out whether the upload is working or not , you can create a custom render for WebView .

Then set an extra class which inherit from WebChromeClient ,and pass the callback in OnShowFileChooser method , so that you can check the error message or data .

Sample code

[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyRenderer))]
namespace MyForms.Droid
{
    internal class MyRenderer : WebViewRenderer
    {
        Context _context;
        public MyRenderer(Context context) : base(context)
        {
            _context = context;
        }


        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.SetWebChromeClient(new ExtendedChromeClient(MainActivity.activity));
            }
        }
    }

    class ExtendedChromeClient: WebChromeClient
    {
        private static int filechooser = 1;
        private IValueCallback message;
        private MainActivity activity = null;

        public ExtendedChromeClient(MainActivity context)
        {
            this.activity = context;
        }

        public override bool OnShowFileChooser(Android.Webkit.WebView webView, IValueCallback filePathCallback, FileChooserParams fileChooserParams)
        {
            this.message = filePathCallback;
            Intent chooserIntent = fileChooserParams.CreateIntent();
            chooserIntent.AddCategory(Intent.CategoryOpenable);
            this.activity.StartActivity(Intent.CreateChooser(chooserIntent, "File Chooser"), filechooser, this.OnActivityResult);
            return true;
        }

        private void OnActivityResult(int requestCode, Result resultCode, Intent data)
        {
            if (data != null)
            {
                if (requestCode == filechooser)
                {
                    if (null == this.message)
                    {
                        return;
                    }

                    this.message.OnReceiveValue(WebChromeClient.FileChooserParams.ParseResult((int)resultCode, data));
                    this.message = null;
                }
            }
        }
    }
}

Refer to

Uploading files using a webview in Xamarin Android App

https://social.msdn.microsoft.com/Forums/en-US/5f40a9e3-453c-4264-b8f7-224d124ec4eb/how-to-work-with-file-uploader-in-webview-in-xmarineandroid-in-c-application-in-visual-studio?forum=xamarinandroid

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ColeX - MSFT