Write into a file or How to use the Cordova File Plugin

Ionic Framework ionic-v3
1

The overall problem I’m trying to solve is to create a file on the phone’s filesystem and then write into it.

What I’m trying to achieve: In my app, the user takes full-size pictures, that I move from cache folder to files folder. Next step is to create thumbnails for these pictures. I already have a solution using HTML canvas that returns a base64-encoded jpg image. I also have found a method to convert this string into a blob. Now I want to save that blob to a file on the phone (that will be used as preview in a gallery as the full-sized images take way to long to load).

ionic-native file plugin
I’ve checked the File plugin from ionic-native. It has a createFile() method which works, but I see no write method or similar, which means I can create an empty file but not write into it (? … Or at least I don’t know how to).

I already use the File plugin from ionic-native to move files from cache folder to files folder in the app’s data folder which works nicely, however it’s not really cross-platform as there are no file sytem constants (like file.cacheDirectory and file.dataDirectory that are defined in the cordova file plugin), which means right now my code is android-specific, which is another drawback of the ionic-native file plugin.

cordova file plugin
The cordova file plugin seems to be advantageous as it has these constants and also a writeFile() method.

To test this plugin I’ve done the following (running on a Linux machine):

ionic start pluginApp blank --v2 --ts
cd pluginApp/
ionic platform add android
ionic plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
ionic run android

Everything runs through smoothly, the app builds and runs on my android phone, I can access the camera, I can access and move the image file on the phone, etc. No problem there.
I learned from a previous problem that I have to write declare var cordova: any; in the file where I want to access cordova plugins, so I did that.
But when I do console.log(cordova.plugins) it only shows the Keyboard plugin. console.log(cordova.plugins.file) yields undefined.

What I need
Simply put: a way to write into a file.
Best thing would be if someone could point me to what I’m missing in my attempt to use cordova file plugin.

2

@oh_lordy it looks like the file plugin exposes the file directly via cordova cordova.file instead of cordova.plugins.file. Can you console log cordova.file to check if it’s there? Please remember to do that after the platform has been ready:

platform.ready().then(() => {
  // console.log(cordova.file)
});

Also here is a dirty example how to write to a file:

  constructor(platform: Platform) {
    platform.ready().then(() => {
      window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(dir) {
        dir.getFile("log.txt", {create:true}, function(file) {
            var logOb = file;        
            var log = ":: TEST LOG ::" + " [" + (new Date()) + "]\n";
            logOb.createWriter(function(fileWriter) {
                fileWriter.seek(fileWriter.length);
                var blob = new Blob([log], {type:'text/plain'});
                fileWriter.write(blob);
            }, function(e){console.error(e);});
        });
      });
    });
  }
3

Oh my, I should’ve read the documentation more carefully … I feel so stupid lol.
Yes, cordova.file is in fact present and I can use it.

Your example appears to be working, all my console.logs are fine, but when I browse the files directory there is no file named log.txt.

4

No worries. It’s easy to miss things like these. You could try to adjust the location of the file with one of these: https://github.com/apache/cordova-plugin-file#ios-file-system-layout

5

So I tried
cordova.file.* with

dataDirectory
cacheDirectory
externalCacheDirectry
externalDataDirectry

it runs, but there is not a single file created. What the hell is going on there?

I also find it strange that a lot of the methods that are mentioned in the documention are simply not available in my build.

For example, the writeFile() method is missing. When I stringify cordova.file

  "applicationDirectory": "file:///android_asset/",
  "applicationStorageDirectory": "file:///data/data/com.ionicframework.pluginapp2720041/",
  "dataDirectory": "file:///data/data/com.ionicframework.pluginapp2720041/files/",
  "cacheDirectory": "file:///data/data/com.ionicframework.pluginapp2720041/cache/",
  "externalApplicationStorageDirectory": "file:///storage/emulated/0/Android/data/com.ionicframework.pluginapp2720041/",
  "externalDataDirectory": "file:///storage/emulated/0/Android/data/com.ionicframework.pluginapp2720041/files/",
  "externalCacheDirectory": "file:///storage/emulated/0/Android/data/com.ionicframework.pluginapp2720041/cache/",
  "externalRootDirectory": "file:///storage/emulated/0/",
  "tempDirectory": null,
  "syncedDataDirectory": null,
  "documentsDirectory": null,
  "sharedDirectory": null

you can see there are not methods. What’s up with that?

1 Like
6

Dear @oh_lordy,

Did you got a solution ? me too in same situation. If got solution please help

Thanks

Anes

7