Issue with 'File' plugin, unable to create a file

Ionic Native
1

Hey people, I am trying to check if a directory exists and then create a file into it and write data to it. Pretty straight forward. So I followed the cordova docs for File and wrote this:

This is my .ts snippet:

this.platform.ready().then((readySource)=>{
                console.log('Platform ready from', readySource);
                (<any>window).resolveLocalFileSystemURL('cdvfile://localhost/temporary/',function(dirEntry){
                    console.log('File system was resolved!');
                    let fileEntry=this.createFile(dirEntry,message.filename);
                    this.writeFile(fileEntry,filedata.data);
                });
});

And this is the createFile() code in question:

createFile(dirEntry,fileName){
        console.log('Creating file...');
        let fileEntry=null;
        dirEntry.getFile(fileName, {create: true, exclusive: false}, function(fileEntry) {
            this.fileEntry=fileEntry;
        });
        return fileEntry;
}

However when I run it natively on my Android device (Pixel 3, Pie). I get this in the logcat:

06-14 13:27:32.480  6104  6104 I chromium: [INFO:CONSOLE(9968)] "This is the clicked dir: endpoint.js", source: http://192.168.43.41:8100/home-home-module.js (9968)
06-14 13:27:32.672  6104  6104 D SystemWebChromeClient: http://192.168.43.41:8100/home-home-module.js: Line 10195 : Platform ready from
06-14 13:27:32.672  6104  6104 I chromium: [INFO:CONSOLE(10195)] "Platform ready from", source: http://192.168.43.41:8100/home-home-module.js (10195)
06-14 13:27:32.699  6104  6202 W AssetFilesystem: Asset manifest not found. Recursive copies and directory listing will be slow.
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient: http://192.168.43.41:8100/home-home-module.js: Line 10197 : File system was resolved!
06-14 13:27:32.732  6104  6104 I chromium: [INFO:CONSOLE(10197)] "File system was resolved!", source: http://192.168.43.41:8100/home-home-module.js (10197)
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient: http://192.168.43.41:8100/cordova.js: Line 309 : Error in Success callbackId: File596949976 : TypeError: Cannot read property 'createFile' of undefined
06-14 13:27:32.732  6104  6104 I chromium: [INFO:CONSOLE(309)] "Error in Success callbackId: File596949976 : TypeError: Cannot read property 'createFile' of undefined", source: http://192.168.43.41:8100/cordova.js (309)
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient: http://192.168.43.41:8100/cordova.js: Line 310 : TypeError: Cannot read property 'createFile' of undefined
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient:     at http://192.168.43.41:8100/home-home-module.js:10198:42
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient:     at http://192.168.43.41:8100/plugins/cordova-plugin-file/www/resolveLocalFileSystemURI.js:76:25
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient:     at success (http://192.168.43.41:8100/plugins/cordova-plugin-file/www/fileSystems-roots.js:37:9)
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient:     at Object.callbackFromNative (http://192.168.43.41:8100/cordova.js:291:58)
06-14 13:27:32.732  6104  6104 D SystemWebChromeClient:     at <anonymous>:1:9
06-14 13:27:32.732  6104  6104 I chromium: [INFO:CONSOLE(310)] "TypeError: Cannot read property 'createFile' of undefined
06-14 13:27:32.732  6104  6104 I chromium:     at http://192.168.43.41:8100/home-home-module.js:10198:42
06-14 13:27:32.732  6104  6104 I chromium:     at http://192.168.43.41:8100/plugins/cordova-plugin-file/www/resolveLocalFileSystemURI.js:76:25
06-14 13:27:32.732  6104  6104 I chromium:     at success (http://192.168.43.41:8100/plugins/cordova-plugin-file/www/fileSystems-roots.js:37:9)
06-14 13:27:32.732  6104  6104 I chromium:     at Object.callbackFromNative (http://192.168.43.41:8100/cordova.js:291:58)
06-14 13:27:32.732  6104  6104 I chromium:     at <anonymous>:1:9", source: http://192.168.43.41:8100/cordova.js (310)
06-14 13:27:32.733  6104  6104 D SystemWebChromeClient: http://192.168.43.41:8100/cordova.js: Line 312 : Uncaught TypeError: Cannot read property 'createFile' of undefined
06-14 13:27:32.733  6104  6104 I chromium: [INFO:CONSOLE(312)] "Uncaught TypeError: Cannot read property 'createFile' of undefined", source: http://192.168.43.41:8100/cordova.js (312)

The logcat clearly states that, for some reason cordova isn’t able to access the createFile(), but I am unable to understand what I am doing wrong. I tried removing and readding the platform as suggested by a stackoverflow question asked by another user. Tried running it on different devices (with Android 7 & 8) and also tried other ways to pass the fileEntry value since I thought that it might be an issue with, allocating the value to the variable (since the logs show typeerror). But no dice!

Environment info:

Ionic:

  • ionic (Ionic CLI) : 4.10.0 (/usr/local/lib/node_modules/ionic)
  • Ionic Framework : @ionic/angular 4.0.0-rc.1
  • @angular-devkit/build-angular : 0.11.4
  • @angular-devkit/schematics : 7.1.4
  • @angular/cli : 7.1.4
  • @ionic/angular-toolkit : 1.4.0

Cordova:

  • cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
  • Cordova Platforms : android 7.1.4, browser 5.0.4
  • Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.3, (and 5 other plugins)

System:

  • NodeJS : v10.15.0 (/usr/local/bin/node)
  • npm : 6.7.0
  • OS : OS X El Capitan
  • Xcode : Xcode 7.3.1 Build version 7D1014

Device:

  • Google Pixel 3
  • Android Version: 9
  • Security Patch Level: 5th June 2019

Any pointers/guidance is greatly appreciated! Thanks in advance!

2

Facing same issue, any help would be helpful

3

Never type the word “function” inside the body of one; use the fat arrow instead. If you truly have the exact same problem as OP, it’s caused by loss of execution context.

4

Hi, can you elaborate a bit on loss of execution context? I tried ‘this’ operator and also directly setting ‘modulename.methodname’. But both didn’t work. Also by fat arrow do you mean using .then() and then putting an anonymous function inside it?

5

https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/

6

As per your suggestion, I switched from this code:

this.platform.ready().then((readySource)=>{
                console.log('Platform ready from', readySource);
                (<any>window).resolveLocalFileSystemURL('cdvfile://localhost/temporary/',function(dirEntry){
                    console.log('File system was resolved!');
                    let fileEntry=this.createFile(dirEntry,message.filename);
                    this.writeFile(fileEntry,filedata.data);
                });
});

to this code:

this.platform.ready().then((readySource)=>{
                console.log('Platform ready from', readySource);
                (<any>window).resolveLocalFileSystemURL('cdvfile://localhost/temporary/').then((dirEntry)=>{
                    console.log('File system was resolved!');
                    let fileEntry=this.createFile(dirEntry,message.filename);
                    this.writeFile(fileEntry,filedata.data);
                }).catch(function () {
                    console.log("Promise Rejected");
                });
            }).catch(function () {
                console.log("Promise Rejected");
            });

I now have “Promise Rejected” in my console from resolveLocalFileSystemURL(). Is it in anyway related to my file system URL? I am sorry if this is an obvious question, I am new to this. Thanks for your help so far!