Ionic-native: File Plugin hangs when writing a file to Application Directory with ionic-plugin-cordova-webview installed

[connor-odoherty]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

With WebView installed, the Cordova File Plugin hangs when I try to use writeFIle. It does not raise an exception, it does not log anything in .catch or .then, it just enters the method and never returns.
I am assuming this has to do with the file:// issue. I am trying to write to the application directory with locations like file:///var/mobile/Containers/Data/Application/D6326230-58CE-4776-8D38-DB495D1CD551/Library/NoCloud/downloaded-assets/d4f3fcc4-ec81-4634-900f-3f47e433f74c/

The part that is strange to me is that killing the app and restarting makes everything work exactly as expected. Looking at the logs, it does not seem like any of the data I am passing to these methods has changed at all.

Another wrinkle: the app will work fine on first download from the app store. However, if I use Ionic Deploy to push new Javascript, the app fails as described above. Upon killing the app and restarting after a Deploy, the app resumes to normal function.

Expected behavior:

After an Ionic Deploy, I should be able to write and read files from the Application Directory without any issues.

Steps to reproduce:

Create an iOS Ionic App that has the webview plugin. Deploy some javascript using Ionic Deploy. Download a blob and use file.writeFile to save the blob in the Application Directory. The app hangs.

Related code:

insert any relevant code here

Other information:

package.json info:

{
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "config": {
    "ionic_webpack": "./webpack.config.js"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/app-version": "^4.2.1",
    "@ionic-native/base64": "^4.2.1",
    "@ionic-native/camera": "^4.2.1",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/device": "^4.3.2",
    "@ionic-native/document-viewer": "^4.3.2",
    "@ionic-native/file": "^4.1.0",
    "@ionic-native/file-opener": "^4.3.2",
    "@ionic-native/file-transfer": "^4.1.0",
    "@ionic-native/in-app-browser": "^4.1.0",
    "@ionic-native/keyboard": "^4.3.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic-native/unique-device-id": "^4.3.1",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "^2.0.1",
    "cordova-android": "6.2.3",
    "cordova-browser": "^4.1.0",
    "cordova-ios": "^4.3.1",
    "cordova-plugin-add-swift-support": "^1.7.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-document-viewer": "^0.9.5",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-file-opener2": "^2.0.19",
    "cordova-plugin-file-transfer": "^1.6.3",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-ionic": "^1.1.8",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.6.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic2-auto-complete": "^1.5.2-release",
    "ionic2-super-tabs": "^4.1.0",
    "ionicons": "3.0.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "webpack-merge": "^4.1.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "ionic": "3.14.0",
    "tslint": "^5.7.0",
    "typescript": "2.4.0"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-file": {},
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-file-opener2": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-ionic": {
        "APP_ID": "a53dc182",
        "CHANNEL_NAME": "none",
        "UPDATE_METHOD": "none",
        "UPDATE_API": "https://api.ionicjs.com",
        "MAX_STORE": "2"
      },
      "cordova-plugin-app-version": {}
    },
    "platforms": [
      "android",
      "browser",
      "ios"
    ]
  }
}

[xwing23]

Any updates to this? I am experiencing this same exact issue... I use Ionic Pro Live Deploy and it's always just the first time an update is downloaded, extracted and the app reloaded where files cannot be written. As soon as the app is closed and restarted, it'll work just fine.

[connor-odoherty]

Still no update :(

Maybe this is a permissions issue on iOS?

[Richky]

I have the same issue except it is a file read that hangs, not a write.

[wfairclough]

I was seeing this issue as well and noticed a small error in the cordova-plugin-file

I have fixed it on a fork of the project for our team and it seems to be working consistently for us now:
https://github.com/suitespot/cordova-plugin-file/commit/2a0da7f1a43e88b801ee70a3462c3df829f4c927

You can try out our version of the plugin by running these commands:

ionic cordova plugin rm cordova-plugin-file
ionic cordova plugin add https://github.com/suitespot/cordova-plugin-file.git#6.0.2-suitespot

I will be submitting a PR to the cordova-plugin-file project soon. Hopefully this helps you guys

[Jahrenski]

I can't seem to be able to install your version of the plugin wfairclough.
But making the change manually seems to work. I hope your PR gets merged soon.

[wfairclough]

@Jahrenski Are you seeing any errors? Maybe I can help.

No response from the maintainers yet. I am not sure when it will get merged, but I hope so as well.

[Jahrenski]

> cordova plugin add https://github.com/suitespot/cordova-plugin-file.git#6.0.2-suitespot --save
(node:15552) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Failed to fetch plugin https://github.com/suitespot/cordova-plugin-file.git#6.0.2-suitespot via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! code 128
npm ERR! Command failed: C:\Program Files\Git\cmd\git.EXE submodule update -q --init --recursive
npm ERR! fatal: 'submodule' appears to be a git command, but we were not
npm ERR! able to execute it. Maybe git-submodule is broken?

I'm probably doing it wrong.

Edit:
I'll add that there is still a problem with reading files.
FileReader.readAsArrayBuffer never fires the onloadend event.

I searched for this problem and it seems that we need to include polyfill.js before cordova.js in the index.html file. This fixes the filereader problem as well.
Information from here: https://github.com/ionic-team/ionic-native/issues/505

[wfairclough]

Hmm. Not too sure. It seems like it may be related to running the command on windows. This issues on npm may have some useful information: https://github.com/npm/npm/issues/2333

[peterpeterparker]

Not all hero wear capes, @wfairclough I love you, thx a lot for the solution!

I was facing the same error #2750 and patching manually my local cordova-file-plugin (in plugins and in the platforms) by adding the missing import var FileReader = require('./FileReader'); in www/FileWriter.js solved my issue

@wfairclough did you submitted a PR to https://github.com/apache/cordova-plugin-file ? If no, go go go go for it 👍

[peterpeterparker]

hahaha now for me as I stated above writeFile is solved, but, a bit later in the process I use file.readAsArrayBuffer for which I encounter now the same problem 😭

[wfairclough]

@peterpeterparker A PR was merged into cordova-plugin-file PR#273 back in July, although I have not seen any package published to the npm registry with my change yet.

[peterpeterparker]

Not sure but it looks like the other unreleased modifications of @jcesarmobile https://github.com/apache/cordova-plugin-file/commit/cc3aedb0abb220b4c4ede7c48af5e578fd071690 also improves a bit the situation, I don't always face the same problem with file.readAsArrayBuffer as often, but still it happens

[danielsogl]

cc @manucorporat

[peterpeterparker]

My gosh, I think I found the root reason of my above problem regarding FileReader

The thing is, I was still referencing cordova.js in my index.html, therefore Cordova was included twice (https://github.com/ionic-team/ionic/issues/15143) because with Ionic v4 / Angular v6, Cordova will actually be added automatically at bundle time to index.html (if I understand correctly)

Removing this explicit call to cordova.js in my index.html file solve the issue. For a weird reason all plugins were working fine except that particular call and only on Android...don't ask me

To summarize:

• You face a problem with file.writeFile: apply the workaround of @wfairclough till a new version of cordova-plugin-file will be released

• You face a problem with file.readAsArrayBuffer in a Ionic v4 app, double check that you didn't manually added cordova.js in your index.html

[newuser44]

suitespot/cordova-plugin-file@2a0da7f This seems to have fixed my problem not being able to write to a file in the dataDirectory. I just manually made the change to the plugin in www directory and platform_www. Verifying on all phones. Thanks

[jcesarmobile]

Closing as the bug was on file plugin and it's released already