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

Ionic Native
1

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

2

I am experiencing same thing. Any solution?

3

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

5

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
6

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

7

On which platform its not working? I didnā€™t set any permissions

8

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

9

It works fine now !

It seems that the missing element was the path rename

Many thanks :wink:

10

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
11

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 ?

12

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

13

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

14

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.

15

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
16

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?

17

Hint

Ios works perfectly with documentsDirectory but not with DataDirectory