File Upload using WebView on Android

main.dart

/// Read details on https://theprogrammingway.com/flutter-file-upload-using-webview-on-android/
import 'dart:io';

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

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final WebViewController controller;

  @override
  void initState() {
    controller = WebViewController();
    controller.loadRequest(
        Uri.parse("https://theprogrammingway.com/html-file-upload/"));
    addFileSelectionListener();
    super.initState();
  }

  void addFileSelectionListener() async {
    if (Platform.isAndroid) {
      final androidController = controller.platform as AndroidWebViewController;
      await androidController.setOnShowFileSelector(_androidFilePicker);
    }
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(controller: controller);
  }

  /// Function for file selection from gallery
  Future<List<String>> _androidFilePicker(FileSelectorParams params) async {
    final result = await FilePicker.platform.pickFiles();

    if (result != null && result.files.single.path != null) {
      final file = File(result.files.single.path!);
      return [file.uri.toString()];
    }
    return [];
  }
}

doesn't work anymnore

@ahmedomar365 what's the issue? What error you are getting?

Thank you for your code. It works well.

it shows image selection but then closes. it doesnt get uploaded to the backend web app. mine is django. /// Read details on https://theprogrammingway.com/flutter-file-upload-using-webview-on-android/
import 'dart:io';

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

void main() {
runApp(const MyApp());
}

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

// This widget is the root of your application.
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}

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

@OverRide
State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
late final WebViewController controller;

@OverRide
void initState() {
controller = WebViewController();
controller.loadRequest(
Uri.parse("https://pythonanywhere.com/"));
controller.setJavaScriptMode(JavaScriptMode.unrestricted);

addFileSelectionListener();
super.initState();

}

void addFileSelectionListener() async {
if (Platform.isAndroid) {
final androidController = controller.platform as AndroidWebViewController;
await androidController.setOnShowFileSelector(_androidFilePicker);
}
}

@OverRide
Widget build(BuildContext context) {
return WebViewWidget(controller: controller,
);
}

/// Function for file selection from gallery
Future<List> _androidFilePicker(FileSelectorParams params) async {
final result = await FilePicker.platform.pickFiles();

if (result != null && result.files.single.path != null) {
  final file = File(result.files.single.path!);
  return [file.uri.toString()];
}
return [];

}
}

Is there a way to do the same thing for ios?

======== Exception caught by services library ======================================================
The following MissingPluginException was thrown during a platform message callback:
MissingPluginException(No implementation found for method any on channel miguelruivo.flutter.plugins.filepicker)

When the exception was thrown, this was the stack:
#0 MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:332:7)

#1 MethodChannel.invokeListMethod (package:flutter/src/services/platform_channel.dart:520:35)

#2 FilePickerIO._getPath (package:file_picker/src/file_picker_io.dart:103:33)

#3 _MyHomePageState._androidFilePicker (package:teste_custom_tabs/main.dart:62:20)

#4 WebChromeClientFlutterApi.setup. (package:webview_flutter_android/src/android_webview.g.dart:2455:40)

#5 BasicMessageChannel.setMessageHandler. (package:flutter/src/services/platform_channel.dart:235:36)

#6 _DefaultBinaryMessenger.setMessageHandler. (package:flutter/src/services/binding.dart:618:22)

I don't know how to thank you enough for this, just gave you a follow thanks.

There is nothing special to be done for iOS. The only problem is special configuration required for android.

@Emanoel7S This looks like issue on filepicker, check if you have configured it properly.