Ionic 3 Native : File : {code: 5, message: "ENCODING_ERR"}

Question

I'm using the checkFile function from File API plugin in Ionic 3 to check if a file exists locally. The Promise rejects with the following error :

FileError {code: 5, message: "ENCODING_ERR"}

From what I see on the Mozilla Docs of the File API, the problem is that "The URL is malformed." However, I don't see how is the URL malformed. Here is the relevant code showing how I'm calling the function plus the actual values of involved variables (The value of baseDirectory is set to file:///data/user/0/ch.protectator.fehpedia/files/) :

let baseDirectory = this.file.dataDirectory;
let fileToCheck = "File:Icon Portrait Abel.png";

let promise = this.file.checkFile(this.file.dataDirectory, fileName).then(bool => {
    // Things
}, reason => {
    console.error(reason);
});

And that's the Promise that fails. What's strange about that case is that I actually tried to display that image later in the code, ignoring if it has been found by File.checkFile, and the image displays.

In the HTML template, I later use :

<img [src]="imgUrl">

where imgUrl is set using :

this.imgUrl = this.file.dataDirectory + '/' + "File:Icon Portrait Abel.png";

So the image exists and displays correctly when called by the WebView, but the Native File plugin tells me the URL is malformed, even to me it seems to be exactly the same URL. That's where I'm stuck, I don't know what to change for the code to work. Should checkFile be used in a different way ? Also, a more precise cause of failure would help, but all I got is ENCODING_ERR, I don't know what actual part of the URL seems malformed.

Answer 1

After looking through similar cases, I've found no solution nor documentation about this specific case. But while experimenting with different values, I found what caused this error : :. Yes, the colon. The one present in the file name.

While I still have no explanation about why : causes the native File plugin to fail but not the web view, removing : from the file name effectively allows File to see it without raising an ENCODING_ERR. While this is not an optimal solution, this workaround is effective.

Answer 2

In my case, I let "File:///" in the route and now it is working.

Answer 3

None of the answers solve my problem. It was very simple, I was using the wrong Directory to save a file in iOS. I was using "Cache" but kept getting the error

I change to

this.file.tempDirectory;

And worked!

Answer 4

Just cross check with creating simple file name first.

In my case the file name I was using was not a proper file name.

Code that was giving the same error

    const fileName = localStorage.getItem(appGlobals.UserData.email) + '_' + new Date() + '.mp3';
this.file.createFile(this.file.dataDirectory, fileName, true)
.then((fileEntry: FileEntry) => {
  //do something with the file
}).catch(err => {
  alert(JSON.stringify(err));
});

code after changes

    const fileName = localStorage.getItem(appGlobals.UserData.email) + '_' + new Date().getTime() + '.mp3';
this.file.createFile(this.file.dataDirectory, fileName, true)
.then((fileEntry: FileEntry) => {
// do something with the file
}).catch(err => {
  alert(JSON.stringify(err));
});

Answer 5

In my case this worked for me

resolveLocalFileSystemURL(`${cordova.file.externalDataDirectory.replace(/^file:\/\//g, '')}record252202022149.3gp`, function(entry) { 
    console.log(entry);
}, (e) => console.error(e))

Answer 6

Make sure that you are pointing to the correct directory to save the files to depending on the platform. I created this utility to get the correct directory for Android and iOS:

    getDeviceDirectoryToSaveFile(): string {
     if (this.platform.is('android')) {
      return this.file.externalDataDirectory;
     } else if (this.platform.is('ios')) {
      return this.file.applicationStorageDirectory+"/Documents";
     }
    }