File Upload does not work inside Webview, Flutter

Question

I have a website and I converted that website into flutter android application using webview_flutter plugin, everything is working fine.

But there is an issue, there is a form on website in which there is a file input in the form. On website everything works fine but when I click on upload file from android application which I created using webview_flutter plugin, the file input dose not works.

When I click on upload file, it dose not open any popup or anything to allow me to select file from my phone and to upload into the form.

This is my main.dart code:

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:custom_splash/custom_splash.dart';
import 'package:connectivity/connectivity.dart';
import 'package:selfcare/nointernet.dart';

void main() {

  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());

}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Self Care",
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: Scaffold(body: splash()));
  }
}

class splash extends StatefulWidget {
  @override
  _splashState createState() => _splashState();
}

class _splashState extends State<splash> {
  String result = '';
  var Colorsval = Colors.white;

  @override
  void initState() {
    CheckStatus();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if (result != null && result == "Connected") {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: WebViewClass(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    } else if (result != null && result == "NoInternet") {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: NoInternetPage(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    } else if (result == null) {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: NoInternetPage(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    } else {
      return CustomSplash(
        //backGroundColor: Color(0xFFFF9800),
        imagePath: "assets/images/logo.png",

        home: NoInternetPage(),
        duration: 10,
        animationEffect: "zoom-in",
      );
    }
  }

  void CheckStatus() {
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      if (result == ConnectivityResult.mobile ||
          result == ConnectivityResult.wifi) {
        ChangeValues("Connected", Colors.green[900]);
      } else {
        ChangeValues("NoInternet", Colors.red[900]);
      }
    });
  }

  void ChangeValues(String resultval, Color colorval) {
    setState(() {
      result = resultval;
      Colorsval = colorval;
    });
  }
}

class WebViewClass extends StatefulWidget {
  WebViewState createState() => WebViewState();
}

class WebViewState extends State<WebViewClass> {
  num position = 1;

  final key = UniqueKey();

  doneLoading(String A) {
    setState(() {
      position = 0;
    });
  }

  startLoading(String A) {
    setState(() {
      position = 1;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Permission.mediaLibrary.request();
    Permission.phone.request();
    Permission.photos.request();
    Permission.storage.request();
    Permission.camera.request();
  }
  //Check Internet Code Starts

  //Check Internet Code Ended here
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //appBar: AppBar(title: Text('Show ProgressBar While Loading Webview')),
        appBar: PreferredSize(
          child: Container(),
          preferredSize: Size.fromHeight(0.0),
        ),
        body: IndexedStack(index: position, children: <Widget>[
          WebView(
            initialUrl: 'http://mywebsite.com',
            javascriptMode: JavascriptMode.unrestricted,
            key: key,
            onPageFinished: doneLoading,
            onPageStarted: startLoading,
            //onWebResourceError: ,
          ),
          Container(
            color: Colors.white,
            child: Center(
                child: CircularProgressIndicator(
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
            )),
          ),
        ]));
  }
}

And this is the flutter webview plugin I used:

dependencies:
  webview_flutter: ^1.0.7

I also used some permissions to get rid of this problem but not solved it, the permissions:

Permission.mediaLibrary.request();
Permission.phone.request();
Permission.photos.request();
Permission.storage.request();
Permission.camera.request();

Answer 1

Since webview_flutter 4.0.2 you can easily do it, as support for Android was just added.

In order to achieve this, you'd have to first check if the platform it's running on is Android and then set your custom listener:

if (Platform.isAndroid) { // or: if (webViewController.platform is AndroidWebViewController)
    final myAndroidController = webViewController.platform as AndroidWebViewController;

    myAndroidController.setOnShowFileSelector( (params) async {
        // Control and show your picker
        // and return a list of Uris.

        return []; // Uris
    });
}

Answer 2

webview_flutter plugin has yet to have support for file upload. You can track the currently open ticket related to this issue here. In the meantime, you can use either flutter_inappwebview or flutter_webview_plugin as a workaround.

Answer 3

I managed to get this working using the webview_flutter_pro plugin. I've posted details about how to get it to work here:

How to open file picker from gallery or camera android in webview_flutter?