Handle file uploads for Android with native Flutter

the <input type="file" /> element does on work in any webview so far. It does work in a Android Chrome Browser, but not while inside the app.

The screecast below describes how we currently post Files immediately upon selection. So long as Flutter sends the returned json back into the WebView, the final form submission to Save could still be handled.

file-uploads.webm

A typical file upload looks like this in CURL:

curl 'https://d8local.trackauthoritymusic.com/file/upload/group_content/groups-group_membership/field_cover?_format=json' \
  -H 'Accept: application/json' \
  -H 'Accept-Language: es-MX,es;q=0.9,en-US;q=0.8,en;q=0.7,es-419;q=0.6' \
  -H 'Authorization: Bearer [access_token]' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryrhJyEwxAmnNQ6aH7' \
  -H 'Origin: https://localhost.pickupmvp.com:1340' \
  -H 'Pragma: no-cache' \
  -H 'Referer: https://localhost.pickupmvp.com:1340/' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: cross-site' \
  -H 'User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1' \
  -H 'sec-ch-ua: ""' \
  -H 'sec-ch-ua-mobile: ?1' \
  -H 'sec-ch-ua-platform: ""' \
  --data-raw $'------WebKitFormBoundaryrhJyEwxAmnNQ6aH7\r\nContent-Disposition: form-data; name="file"; filename="eli-laselecion.jpg"\r\nContent-Type: image/jpeg\r\n\r\n\r\n------WebKitFormBoundaryrhJyEwxAmnNQ6aH7--\r\n' \
  --compressed \
  --insecure

I'm imaging a solution such as

window.flutter_inappwebview.callHandler('handleFileUpload', {
  accessToken: accessToken,
  targetUrl:  'https://api.trackauthoritymusic.com/file/upload/group_content/groups-group_membership/field_cover?_format=json',
});

And then Flutter would post the response back to webview on completion or error.

eliataylor / tam-flutter

Handle file uploads for Android with native Flutter #10