Local files on IOS device : can write but not read any file

Hi there,

I used the cordova-plugin-file-transfer plugin to download files to local system.

I selected the cordova.file.dataDirectory option to store my files.

No problem for downloading, I could write into the local system and check their existing through this command

this.file.resolveLocalFilesystemUrl(cordova.file.dataDirectory + 'myIMG.jpg').then(
                        (files) => {
                            console.log('IMG file found : ' + files.toURL());
                        }
                    ).catch(
                        (err) => {
                            console.log('IMG file not found');
                        }
                    );

But when I try to access the files, for example to display an image downloaded in the local filesystem, my IOS device does not show any image.

The files.toURL() correctly returns : file:///var/mobile/Containers/Data/Application/XXXXXXXX/Library/NoCloud/myIMG.jpg
Looking to the container shows that the files are inside.

Even this command gives an empty image :
<img src="file:///var/mobile/Containers/Data/Application/XXXXXXXX/Library/NoCloud/myIMG.jpg"/>

Any help please ? Cannot understand why I can write but no read a downloaded file to the local system.

Thanks

I am experiencing same thing. Any solution?

No solution here…:s Did you get any solution elsewhere ? I am still stucked with that

Yes apparently my code started working on ios 11.2. Here is the snippet :

downloadImage(image) {

this.platform.ready().then(() => {

  const fileTransfer: TransferObject = this.transfer.create();
  var url = encodeURI("https://i.pinimg.com/736x/16/a8/eb/16a8eb1a9dfab022ea92cb0d66b0a6c1--corgi-puppies-baby-corgi.jpg");


  fileTransfer.download(url, this.storageDirectory + image).then((entry) => {


    const alertSuccess = this.alertCtrl.create({
      title: `Download Succeeded!`,
      subTitle: `${image} was successfully downloaded to: ${JSON.stringify(entry)}`,
      buttons: ['Ok']
    });

    this.isImage = true;
    this.path = this.storageDirectory;
    this.path = this.path.replace("file:///","/");
    alertSuccess.present();

  }, (error) => {

    const alertFailure = this.alertCtrl.create({
      title: `Download Failed!`,
      subTitle: `${image} was not successfully downloaded. Error code: ${error.code}`,
      buttons: ['Ok']
    });

    alertFailure.present();

  });

});

}

and on html

  <img *ngIf="isImage" src="{{path}}pug.jpg" alt="path"/>
1 Like

This does not work for me. What permissions do you have set in your config.xml and index.html? Thanks a lot!

On which platform its not working? I didn’t set any permissions

I’ve gotten it working after cleaning everything up. It was not working previously on ios and android. Thanks.

It works fine now !

It seems that the missing element was the path rename

Many thanks :wink:

Hi,
you have encode url with using of normalizeURL,

example:
inject provider
import {normalizeURL} from ‘ionic-angular’;

inject in to constructor.

then url encode with normalizeURL(your url here);

I hope this is useful for you.

1 Like

Hi guys,

Issue again with WKWebview update (cordova-plugin-ionic-webview v4.1.0) which does not support normalizeURL().

According to other solutions I have tried :

private win: any = window;
this.img = this.win.Ionic.WebView.convertFileSrc(LocalString);

and
<img [src] = "img" />

to display image stored in local container but the image still doesn’t display on my device…

When I downgrade to WKWebview v1.1.11 (which was my previously version before my update) it all works fine.

Any help to manage local images display with WKWebview v4.1.0 ?

I saw on twitter that they just released an update to the plugin. Have you tried using it?

Just upgraded version but still no local stored image displayed on my device :fearful:

I wonder if you couldn’t benefit from the wisdom I’ve acquired over the last couple of weeks, where I was trying to download and save mp3 files to play with the html5 <audio> tag. I’ve just posted information about it in another solution on this forum. But, the easiest way to see what I’m doing is to look at my code in https://github.com/VictorNorman/AudioPlayFromData.

See home.page.ts and code.ts for code that copies files, reads them, changes the URLs to be useable, etc.

Thanks @VictorNorman for your reply.

I have found this solution and realized that I had to both convert and sanitize the local url

protected fixURL(url: string): string | SafeUrl {
	if (this.platform.is('cordova')) {
		const win: any = window;
		const fixedURL = win.Ionic.WebView.convertFileSrc(url);

		return this.sanitizer.bypassSecurityTrustUrl(fixedURL);
	} else {
		return url;
	}
}

But now I am stucked with dynamic background-image on angular…

I have tried all these options, none of them display the image
<ion-card [style.backgroundImage]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [style.background]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [style.background-image]="'url(' + fixURL(url) + ')'"></ion-card>
<ion-card [ngStyle]="'url(' + fixURL(url) + ')'"></ion-card>

Error message in console
fixURL > SafeValue must use [property]=binding: ionic://localhost/_app_file_/var/mobile/Containers/Data/Application/B751E65D-DEAE-4292-BC08-3EAB25E76E1C/Library/NoCloud/135/135.jpg (see http://g.co/ng/security#xss)

Any idea why working with image but not background-image…?

1 Like

Sorry, but I haven’t done anything with background images, especially in ion-cards. Looking at the ion-card docs, it appears you are supposed to set the background with --background, but I’m not sure if that helps you for this problem at all.

Is this error message coming from the
return this.sanitizer.bypassSecurityTrustUrl(fixedURL);
call or from somewhere else?

Hint

Ios works perfectly with documentsDirectory but not with DataDirectory