Ionic Native File.readAsDataURL giving error code: 1 message: NOT_FOUND_ERR

Ionic Native
1

X-Post to StackOverflow

I am trying to retrieve the Data URL of a picture saved to iPhone local storage in Ionic Native, running on real device, not simulator.

I am using File.readAsDataURL

I used X-code to look into my phone’s local storage and I can see the image at this location.

/var/mobile/Containers/Data/Application/* My APP ID */Documents/www/assets/images/image.png

Here is my code:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { File } from 'ionic-native';

declare var cordova: any;

@Component({
  selector: 'get-picture',
  templateUrl: 'get-picutre.html'
})

export class GetPictureComponent {
    fs:string = cordova.file.documentsDirectory;

    constructor(
        public platform: Platform
    ) {}

    ionViewDidEnter() {
         this.platform.ready().then(() => {
            console.log("FileSystem", this.fs); //logs FileSystem file:///var/mobile/Containers/Data/Application/* My APP ID */Documents/
            
            File.readAsDataURL(this.fs, 'www/assets/images/image.png')
              .then((imgData) => {console.log('Image Data', imgData)})
              .catch((error)=> console.log('error', error)); //Logs error {"code":1,"message":"NOT_FOUND_ERR"}

          }); 
    }

}

I have tried basically the same thing with

window.resolveLocalFileSystemURL(file:///var/mobile/Containers/Data/Application/* My APP ID */Documents/www/assets/images/image.png

and I get error code 1 again.

I updated my config.xml file with these preferences:

  <preference name="iosExtraFilesystems" value="library,library-nosync,documents,documents-nosync,cache,bundle,root" />
  <preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" />

Does anyone know why this would not be working?

Ionic Version - 2.1.14

Thanks in advance!

2

I did a little bit more digging into this issue.

First I did a File.listDir() at my root documents directory (cordova.file.documentsDirectory). I found that the the only folder in the documents directory, that the File System could see, was “NoCloud”.

Even though Wikitude is successfully putting images in a folder in this directory called "/www/assets/images/" the file system cannot see, write, or read to it.

I set up wikitude to save images into the “NoCloud” folder and now I can successfully use File.readAsDataUrl() to get base64 image data from the “NoCloud” folder.

Hope this helps someone.

3

I have used “cordova-plugin-file” from https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

Initially I was getting the following error -

code:1 message:“NOT_FOUND_ERR”

To fix this I added the following line in config.xml file and it got resolved.

4

You forgot to post the line you added to config.xml! I have the same error and it would be super helpful to know what you did to fix it!

@kanchan_130986

5

Having the exact same problem on Android Nougat. Any solution?

6

You forgot the actual line that fixed it!

7

Hi guys,
After so much trying, I found this solution to store images

let UUID = 'empleado-' + (new Date().getTime()).toString(16);

    let realData = imagen.split(",")[1];
    let blob = this.b64toBlob(realData, 'image/jpeg');

    this.file.checkDir(this.file.externalApplicationStorageDirectory, 'DirectorioFotos')
        .then(_ => {
          this.file.writeFile(this.file.externalApplicationStorageDirectory + 'DirectorioFotos/', UUID + '.jpg', blob).then(response => {
            // ACTION
          }).catch(err => {
            // ACTION
          })
        })
        .catch(err => {
          this.file.createDir(this.file.externalApplicationStorageDirectory, 'DirectorioFotos', false).then(result => {
            this.file.writeFile(this.file.externalApplicationStorageDirectory + 'DirectorioFotos/', UUID + '.jpg', blob).then(response => {
              // ACTION
            }).catch(err => {
              // ACTION
            })
          })
        });

  b64toBlob(b64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);

      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      var byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
  }

I hope someone is helpful