Flutter Webview issue: Can't upload attachments to Airtable forms. Any advice?

Other Questions Airtable
1

I’m having trouble with Airtable forms in my Flutter app. I’m using a webview to load the form, but I can’t add image attachments. This problem started with flutter webview 3.0.0 and still exists in 4.2.0.

I’ve tried different versions, but no luck. The form loads fine, but when I try to attach an image, it doesn’t work. It’s frustrating because everything else seems to be working correctly.

Here’s a simplified version of my code:

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

class AirtableFormScreen extends StatefulWidget {
  @override
  _AirtableFormScreenState createState() => _AirtableFormScreenState();
}

class _AirtableFormScreenState extends State<AirtableFormScreen> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..loadRequest(Uri.parse('https://example.com/airtable-form'))
      ..setJavaScriptMode(JavaScriptMode.unrestricted);
  }

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

Has anyone else encountered this issue? Any suggestions on how to fix it?

2

hey sarahj, i’ve run into similar probs with webviews. have u tried enabling DOM storage? add this to ur controller setup:

…setDomStorageEnabled(true)

also, check if JavaScript is fully enabled. sometimes that causes attachment issues. lemme know if it helps!

3

I’ve encountered a similar issue in my projects. One potential solution is to use a different WebView package, such as ‘flutter_inappwebview’. It often provides better compatibility with complex web forms like Airtable’s.

To implement this, you’d need to replace the ‘webview_flutter’ import with ‘flutter_inappwebview’ and adjust your code accordingly. The setup is similar, but it offers more granular control over WebView settings.

Additionally, ensure you’ve set the correct permissions in your AndroidManifest.xml and Info.plist files for file access and camera usage. Sometimes, missing permissions can cause attachment upload failures.

If these suggestions don’t resolve the issue, you might need to investigate if there’s any content security policy (CSP) on the Airtable form that’s blocking file uploads from within a WebView context.

4

I’ve dealt with this exact issue in one of my projects. The problem likely stems from how the webview handles file inputs. What worked for me was implementing a custom file picker and then injecting the selected file into the webview using JavaScript.

Here’s a rough outline of what I did:

  1. Created a custom file picker using Flutter’s file_picker package.
  2. When the user wants to upload a file, I intercepted that action in the webview.
  3. Opened my custom file picker.
  4. After file selection, I used the WebViewController to execute JavaScript that simulated file selection in the form.

It’s a bit of a workaround, but it solved the attachment problem for me. You might need to tweak it based on how Airtable’s form is structured, but the general approach should work. Let me know if you want more details on the implementation.