File upload not working in Flutter WebView for external forms - how to fix?

[ZoeStar42]

I’m having trouble with file uploads when displaying external forms in Flutter WebView. The form loads perfectly fine, but whenever I try to upload files or images, nothing happens. I’ve tested this with both older and newer versions of the webview_flutter package, but the issue persists.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<FormViewer> createState() => _FormViewerState();
}

class _FormViewerState extends State<FormViewer> {
  int progressValue = 0;
  WebViewController controller = WebViewController();

  @override
  void initState() {
    super.initState();
    controller
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (pageUrl) {
            setState(() {
              progressValue = 0;
            });
          },
          onProgress: (currentProgress) {
            setState(() {
              progressValue = currentProgress;
            });
          },
          onPageFinished: (pageUrl) {
            setState(() {
              progressValue = 100;
            });
          },
        ),
      )
      ..loadRequest(
        Uri.parse('https://example-form.com/abc123'),
      )
      ..setJavaScriptMode(JavaScriptMode.unrestricted);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Web Form",
          style: TextStyle(color: Colors.blue),
        ),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

Has anyone encountered this issue before? Any suggestions on how to enable file uploads in Flutter WebView would be really helpful.

[Ethan_19Chess]

I encountered a similar issue during my project with Flutter WebView. The default behavior doesn’t support file uploads because it lacks the necessary setup for file selection. To resolve this, you need to implement the file selection functionality by configuring the WebViewController properly. Specifically, set up the file selection delegate in your WebViewController. You can do this by adding the following code: controller.setOnShowFileSelector((params) async { final result = await FilePicker.platform.pickFiles(allowMultiple: params.acceptMultiple, type: FileType.any); if (result != null) { return result.files.map((file) => file.path!).toList(); } return []; });. Additionally, ensure you’ve included the file_picker package in your dependencies, as it’s crucial for accessing files from the device’s storage. This should allow file uploads to work seamlessly on both Android and iOS.

[SoaringEagle]

yeah, that’s a webview limitation. webview can’t open device file dialogs, so u’ll need to handle file selection manually. add the setOnShowFileSelector method to ur controller and use the file_picker package to connect ur web form with native file access.

[charlottek]

File uploads in Flutter WebView don’t work out of the box - the webview_flutter package can’t handle file picker dialogs.

Hit this same problem 6 months ago building a customer portal. WebView just completely ignores when you tap file inputs.

You’ve got to add file selection handling to your controller. Here’s what fixed it for me:

controller.setOnShowFileSelector((params) {
  return _handleFileSelection(params);
});

Future<List<String>> _handleFileSelection(FileSelectorParams params) async {
  FilePickerResult? result = await FilePicker.platform.pickFiles(
    allowMultiple: params.acceptMultiple,
    type: FileType.any,
  );
  
  if (result != null && result.files.isNotEmpty) {
    return result.files
        .where((file) => file.path != null)
        .map((file) => file.path!)
        .toList();
  }
  
  return [];
}

Add file_picker to your pubspec.yaml:

dependencies:
  file_picker: ^5.5.0

Tested on Android and iOS - works perfectly. setOnShowFileSelector basically connects the native file picker to your webview’s file inputs.

[sophialee92]

Yeah, this is super common with Flutter WebView. WebView can’t automatically connect web file inputs to your device’s file system.

I hit this same issue on a client project where users needed to upload documents through an embedded web form. Fixed it by setting up a custom file handler using setOnShowFileSelector on the WebViewController.

Here’s what happens: user taps a file input in the web form, but instead of opening a browser file picker (which doesn’t exist in WebView), your custom handler kicks in. Then you use something like file_picker to open the native file dialog and send the selected files back to WebView.

Test this heavily on both Android and iOS - file handling works differently between platforms, especially around permissions and file access.