where was file location downloaded in Ionic - ionic-framework

Question

I'm try to download file in ionic5 using this code
downloadImages() {
let photo_name = this.util.getPhotoName(this.contacts.rows.item(this.counter).person_fullname);
let url = encodeURI(this.imagePathUrl + photo_name + "?r=" + Math.round(Math.random() * 999999));
let local_path = this.util.getLocalPath();
let fileUrl = local_path + this.paramPro.getPhotoFileName() + "/" + photo_name;
this.fileTransfer.download(url, fileUrl).then(entry => {
console.log('download : ', entry);
if (this.counter == this.contacts.rows.length-1) {
this.loading.dismiss().catch(() => {});
this.presentDownloadFinishAlert(this.paramPro.getMessage('title'), this.paramPro.getMessage('download_complete'));
} else {
this.counter++;
this.downloadImages();
}
}).catch(e => {
if (this.counter == this.contacts.rows.length-1) {
this.loading.dismiss().catch(() => {});
this.presentDownloadFinishAlert(this.paramPro.getMessage('title'), this.paramPro.getMessage('download_complete'));
} else {
this.counter++;
this.downloadImages();
}
});
}
and i got console.log
file:///data/user/0/io.ionic.starter/files/photo_mg/%E0%B8%99%E0%B8%B2%E0%B8%A2%E0%B8%9B%E0%B8%B4%E0%B8%A2%E0%B8%81%E0%B8%A3%20%E0%B8%AD%E0%B8%A0%E0%B8%B4%E0%B8%9A%E0%B8%B2%E0%B8%A5%E0%B8%A8%E0%B8%A3%E0%B8%B5.png
it is same issue as Location of the file downloaded on android using ionic
i also put this code in config.xml
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" />
and put this code in AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
it still doesn't work where was file:///data/user/0/io.ionic.starter/files in my phone ? I find it with windows explorer find files, and i not found it.

Answer 1

finally, found the answer. ionic cordova need to use Ionic.webView.convertFileSrc to
convert file
from file:///path/to/device/file
to http://host:port/prefix/path/to/device/file <--- to display in html
see doc https://ionicframework.com/docs/core-concepts/webview#file-protocol
you can't browse files directly in your phone ?? (not sure)
this.fileTransfer.download(url, fileUrl).then(entry => {
let win: any = window;
this.safeURL = win.Ionic.WebView.convertFileSrc(entry.toURL());
});

Answer 2

Not especially for your need but I can provide a larger solution. I create a cache service for Ionic and it includes file saving and checking
private win: any = window;
public async checkFile(fileUrl) {
let stringURL = String(fileUrl);
let fileName = stringURL.split('//')[1].replace(/\//g, '-');
let directory;
if (this.platform.is("desktop")) {
return fileUrl;
}
if (this.platform.is("android")) {
directory = this.file.dataDirectory;
}
if (this.platform.is("ios")) {
directory = this.file.dataDirectory;
}
return this.file.checkFile(directory, fileName)
.then(
async result => {
if (result) {
return this.win.Ionic.WebView.convertFileSrc(directory + fileName);
} else {
return fileUrl;
}
}
)
.catch(
async err => {
//FileError.NOT_FOUND_ERR
if (err.code == 1) {
let fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(fileUrl, directory + fileName, true)
.then(
result => {
}
)
.catch(
error => {
console.error(error);
throw error;
}
)
}
return fileUrl;
}
)
}
If you log directory in checkFile function or result in catch part of the function you will see where the file is
You can check project and code from here : https://gitlab.com/demarkelabs/sanalmarketuygulamam/ionic-app/-/blob/master/src/app/cache.service.ts