Hey folks, I’m stuck with a problem in my Flutter app. I’m trying to show an Airtable form in a webview, but I can’t get the file upload to work.
I first tried with flutter_webview 3.0.0. The form loaded fine, but adding image attachments was a no-go. So I updated to the latest version (4.2.0), hoping it would fix things. But nope, still can’t upload files.
Here’s a snippet 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://myairtableform.com'))
..setNavigationDelegate(
NavigationDelegate(
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 on how to get file uploads working? I’m all out of ideas here. Thanks!
I’ve encountered a similar issue with file uploads in Flutter webviews. One workaround that worked for me was using the ‘webview_flutter_plus’ package instead of the standard ‘webview_flutter’. It provides more advanced features and better file handling capabilities.
To implement this, you’ll need to modify your pubspec.yaml to include ‘webview_flutter_plus’, then update your imports and widget usage. The WebViewPlus widget allows for more granular control over JavaScript execution and file inputs.
If that doesn’t solve it, you might need to implement a custom file picker that communicates with the webview via JavaScript bridges. This approach involves more work but gives you full control over the file selection and upload process.
Lastly, ensure your app has the necessary permissions to access files and the internet. Sometimes, these permission issues can cause unexpected behavior with file uploads in webviews.
I’ve been down this road before and it can be a real headache. Have you considered using a native file picker instead of relying on the webview’s built-in functionality? In my experience, this approach tends to yield better results. Instead of depending solely on the webview, I implemented a native file picker using a package like file_picker. When the user needs to upload a file, I trigger this native picker and, once a file is selected, use JavaScript injection to populate the form field with the file data. This method provides more control over the file selection process and is generally more reliable across devices. Also, check your app’s manifest for the necessary permissions, as missing read/write access can cause issues. If nothing else works, you might consider using a custom API endpoint instead of embedding the Airtable form directly, which gives you full control over the upload process even though it requires additional backend work.
hey there mikezhang, have u tried using the inappwebview package? it’s got better support for file uploads in webviews. might be worth a shot. also, check if ur app has the right permissions set up. sometimes that can mess things up. good luck!