flutterdartwebviewflutterwebviewpluginwebview-flutter

When I click upload photo in Flutter WebView, I want to upload photo from phone

When I click on the photo upload input on the website in Flutter WebView, I want to select and upload a photo from the phone. I don't know how to solve this problem. Can you help?

The codes of the website are as follows:

<div class="foto-upload">
    <label class="foto-buton">
        <input type="file" name="resim" multiple="multiple" id="fileupload">
        <i class="fa fa-upload"></i>
        <span>FOTOĞRAF EKLE</span>
        <b>YA DA SÜRÜKLE BIRAK</b>
    </label>
    <input type="hidden" name="thumb_id" id="thumb_id" value="">
    <div class="foto-list">
        <div class="foto-count">EKLEDİĞİNİZ FOTOĞRAF ADEDİ: 
            <span id="mediaCount" data-total="0">0/10</span>
            <span id="mediaStatus"></span>
            <span id="filePercent"></span>
        </div>
        <ul>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
            <li><i class="fa fa-image"></i></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

Below are the Flutter/Dart codes:

WebView(
  initialUrl: '***',
  onWebViewCreated: (webViewController) {
     widget._controllerCompleter.future
           .then((value) => widget._controller = value);
     widget._controllerCompleter.complete(webViewController);
  },
  onPageStarted: (url) {
     setState(() {
        loadingPercentage = 0;
     });
  },
  onProgress: (progress) {
     setState(() {
        loadingPercentage = progress;
     });
  },
  onPageFinished: (url) {
     setState(() {
        loadingPercentage = 100;
     });
  },
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: _createJavascriptChannels(context),
),
Solution

  • You can use the flutter_inappwebview plugin (I'm the author) to handle file upload or to take photos/videos directly using something like <input type="file" accept="image/*" capture>.

    To be able to manage file upload, you need additional setup for Android and iOS. Check the Enable camera for HTML inputs official docs online!

    Here is an example using the current latest plugin version 6 (6.0.0-beta.18):

    import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb &&
      kDebugMode &&
      defaultTargetPlatform == TargetPlatform.android) {
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }

  await Permission.camera.request();
  await Permission.microphone.request(); // if you need microphone permission

  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("InAppWebView test"),
        ),
        body: Column(children: <Widget>[
          Expanded(
            child: InAppWebView(
              key: webViewKey,
              initialData: InAppWebViewInitialData(data: """
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
  <label for="avatar">Choose photos:</label>
  <input type="file" name="resim" multiple="multiple" id="fileupload">
  <br />
  <br />
  <label for="avatar">Take a photo:</label>
  <input type="file" accept="image/*" capture>
</body>

</html>
                """),
              onWebViewCreated: (controller) {
                webViewController = controller;
              },
            ),
          ),
        ]));
  }
}

    Android example