Search code examples
ioscordovaionic-frameworkcapacitorfileapi

Cordova Mobile: Web File API doesn't work correclty

We recently migrated an Cordova App to Capacitor. I am currently working on a feature, which uses Canvas blob data to create File (WebAPI), which we sent to an API. But I noticed that the File API in the Capacitor WebView is outdated and broken:

In the Screenshot I am debugging the App on an iPhone 8 with iOS 14.3 and you will notice the size of the File is always zero and the name property somehow holds the actual data. (e is an Blob).

The first example shows creating a File from a blob, but afterwards the file has size 0 and the name is the BlobArray.

const e = blob;
new File([e], 'asdf', {type: e.type})

The second example shows the basic MDN File example, which works fine in Chrome and Desktop Safari, but on mobile it also uses the string array as name

new File(["foo"], "foo.txt", {
  type: "text/plain",
});

File API Behaviour in the Capacitor/Ionic App

I also tried this in just the iOS Safari Browser and it worked fine.

Therefore I have to assume that our Capacitor App uses an outdated Safari version. Unfortunately I wasn’t able to find any information on how to set the WebView/Safari version for Ionic/Capacitor.

Here is my setup:

  • Device: iPhone 8
  • iOS version: 14.3
  • User-Agent of the ionic App:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

  • User-Agent of iOS Safari:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Mobile/15E148 Safari/604.1

Packages and versions:

    "@capacitor/cli": "2.4.6",
    "@capacitor/core": "2.4.6",
    "@capacitor/ios": "^2.4.6",
    "ionic": "^5.4.14",
    "@ionic/angular": "^5.4.1",
    "@ionic/angular-toolkit": "~2.0.0",
    "ionic-native": "^2.9.0",
    "@ionic-native/file-transfer": "^5.29.0",
    "cordova-plugin-file": "^6.0.2",

Is there a way to set the Safari Version for the WebView or might this be some case of misconfiguration on our part (because of the migration to capacitor)?

Solution

  • By looking at the File prototype in the debugger I noticed that the File constructor was completely different.

    I googled the the code snippet and found out that the code is from the cordova-plugin-file package. The plugin overwrites the global File variable. Therefore the File Web API was not usable anymore.

    By removing the plugin (and the plugin that depended on it) we were able to fix the issue.

    Relevant Github Issue: https://github.com/apache/cordova-plugin-file/issues/453