ios - Cordova Mobile: Web File API doesn't work correclty

Question

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",
});

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)?

question from:https://stackoverflow.com/questions/65904932/cordova-mobile-web-file-api-doesnt-work-correclty

Answer 1

The only thing i can think of that would help, is try changing or updating to a different version of @capacitor/ios. This package is part of what controls the webview that capacitor uses. I don't think there is a way to directly set it.

I made a dummy project that uses "@capacitor/ios": "^2.4.5" and ran the second example you posted. Worked fine for me.