Flutter Webview issue: Can't upload files to Airtable form. Any advice?

Other Questions Airtable
1

I’m stuck with a problem in my Flutter app. I’m trying to display an Airtable form inside a webview. Initially, I used flutter webview 3.0.0, and while the form loaded, I couldn’t add any pictures. I then updated to the latest version, flutter webview 4.2.0, but the issue persists, and I still can’t attach any files.

Here’s a simplified version of my code:

class FormPage extends StatefulWidget {
  @override
  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  late WebViewController _controller;
  int _loadProgress = 0;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://example.com/my-airtable-form'))
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (_) => setState(() => _loadProgress = 0),
          onProgress: (progress) => setState(() => _loadProgress = progress),
          onPageFinished: (_) => setState(() => _loadProgress = 100),
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Airtable Form')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

Any suggestions to resolve this? I really need to enable file uploads for my users. Thanks!

2

I’ve encountered similar issues with file uploads in WebViews. One workaround that worked for me was using a native file picker instead of relying on the WebView’s file input.

Here’s what I did: I added the ‘file_picker’ package to my pubspec.yaml, created a button outside the WebView to trigger the native file picker, and when a file is selected, I used JavaScript injection to pass the file data to the form.

Something like this:

ElevatedButton(
  onPressed: () async {
    final result = await FilePicker.platform.pickFiles();
    if (result != null) {
      final file = result.files.single;
      final fileData = base64Encode(await file.readAsBytes());
      await _controller.runJavaScript('''
        document.getElementById('file-input').value = '$fileData';
        document.getElementById('file-name').value = '${file.name}';
      ''');
    }
  },
  child: Text('Upload File'),
)

This approach bypasses WebView limitations and gives users a smoother experience. It took some tweaking, but it solved my upload issues. Hope this helps!

3

ayo, have u tried using a native file picker instead? its way better than relying on webview for uploads. grab the file_picker package, add a button outside the webview to pick files, then use javascript to pass the file data to ur airtable form. might take some tweaking but should work better than webview alone

4

Have you considered using a native file picker instead of relying on the WebView’s file input? This approach often works better for handling file uploads in Flutter apps with embedded web forms.

Here’s a potential solution:

  1. Add the ‘file_picker’ package to your pubspec.yaml.
  2. Create a button outside the WebView to trigger the native file picker.
  3. When a file is selected, use JavaScript injection to pass the file data to the Airtable form.

You’d need to modify your code to include something like this:

ElevatedButton(
  onPressed: () async {
    final result = await FilePicker.platform.pickFiles();
    if (result != null) {
      final file = result.files.single;
      final fileData = base64Encode(await file.readAsBytes());
      await _controller.runJavaScript('''
        // JavaScript to handle file upload in Airtable form
        // You'll need to adjust this based on your form's structure
      ''');
    }
  },
  child: Text('Upload File'),
)

This method bypasses WebView limitations and should allow your users to upload files to the Airtable form. You might need to tweak the JavaScript injection based on your specific form structure.