Issues uploading files to Airtable forms within Flutter Webview - any workarounds?

Other Questions Airtable
1 
Hey everyone, I'm having trouble with Airtable forms in my Flutter app. I'm using a webview to show the form, but I can't add image attachments. 

I first tried Flutter webview 3.0.0. The form loaded fine, but adding images didn't work. Then I updated to webview 4.2.0, hoping it would fix the issue. But nope, still can't upload attachments.

Has anyone else run into this? I'm not sure if it's a webview problem or something with Airtable. Here's a snippet of my code:

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

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

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

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

Any ideas on how to fix this? Thanks in advance!

2

hav u tried using a different browser or device? sometimes webviews can be finicky. Also, check if ur app has proper permissions for file access. mayb try adding some JavaScript to handle file uploads manually? its a bit of a hassle but might work. good luck!

3

I have encountered similar issues in my projects and found that a custom native file picker can be an effective workaround. Instead of relying on the WebView’s standard file input, you can implement a file picker in Flutter that lets the user select the file, convert it (for example, to base64), and then pass that data back into the WebView using injected JavaScript. This method can bypass the limitations of the WebView regarding file uploads, although it may require some adjustments to your settings and permissions. If this approach proves problematic, you might want to consider using Airtable’s API directly.

4

I’ve encountered a similar issue when working with Airtable forms in a Flutter WebView. After some investigation, I found that the problem often lies in how WebViews handle file inputs and permissions.

One workaround I’ve successfully implemented is to use a custom JavaScript bridge to handle file uploads. Essentially, you intercept the file selection process in the WebView, trigger a native file picker, and then pass the selected file back to the WebView.

Here’s a high-level approach:

  1. Inject custom JavaScript into the WebView to intercept file input clicks.
  2. When a file input is clicked, use the JavaScript channel to notify your Flutter code.
  3. Open a native file picker in Flutter.
  4. Once a file is selected, pass its data back to the WebView via JavaScript.

This method requires more setup, but it bypasses the WebView’s limitations with file inputs. It’s not perfect, but it’s been the most reliable solution I’ve found so far for this particular issue with Airtable forms in Flutter WebViews.