Hi everyone!
I have recently published my Ionic 4 Angular App both as web app and as native Android app.
In the native Android app, everything works fine, except saving a downloaded file.
To download and save a file, I’ve always used file-saver npm package as follows (this is a shared service that I invoke every time I have to download something, from a PDF to an image, etc…):
import { saveAs } from 'file-saver';
// ...
saveGenericFile(api: string, fileinfos: any, idFile: string): any {
let mediaType = 'application/pdf';
let fileName = '';
if (fileinfos != null) {
mediaType = fileinfos.contentType;
fileName = fileinfos.fileName;
}
const headers = this.base.commonHeader;
const url = this.baseUrl + api + '?id=' + idFile;
this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
(response) => {
// tslint:disable-next-line: prefer-const
let blob = new Blob([response], { type: mediaType });
saveAs(blob, fileName);
}, e => {
console.error(e);
this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
}, () => {
/* do nothing */
}
);
}
As I said above, this code snippet works fine, but just when I have to save something from the web release.
The only online examples I was able to find were all about Cordova and/or previous/deprecated versions.
About Capacitor, I just found this documentation and from that I just found this code snippet:
import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';
const { Filesystem } = Plugins;
fileWrite() {
try {
Filesystem.writeFile({
path: 'secrets/text.txt',
data: "This is a test",
directory: FilesystemDirectory.Documents,
encoding: FilesystemEncoding.UTF8
});
} catch(e) {
console.error('Unable to write file', e);
}
}
But the issue is that my function above returns a blob and this one only accept a string for data.
So, is there any Capacitor-Native equivalent feature that I can use to download (and save) Blob files both when running as web-app and when running as Android native app?
Thanks in advance!
UPDATE
I’ve also tried the following, but it’s not working:
import { Platform } from '@ionic/angular';
//...
useCordovaDl: boolean = false;
constructor(
private http: HttpClient,
private base: BaseService,
private requestsService: RequestsService,
private toastsvc: ToastService,
private platform: Platform
) {
this.baseUrl = base.baseUrl;
if (this.platform.is('ios') || this.platform.is('android')) {
this.useCordovaDl = true;
}
}
//...
saveGenericFile(api: string, fileinfos: any, gidFile: string): any {
let mediaType = 'application/pdf';
let fileName = '';
if (fileinfos != null) {
mediaType = fileinfos.contentType;
fileName = fileinfos.fileName;
}
const headers = this.base.commonHeader;
const url = this.baseUrl + api + '?id=' + gidFile;
this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
(response) => {
if (!this.useCordovaDl) {
// tslint:disable-next-line: prefer-const
let blob = new Blob([response], { type: mediaType });
saveAs(blob, fileName);
} else {
this.blobFileWrite(fileName, response);
}
}, e => {
console.error(e);
this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
}, () => {
/* do nothing */
}
);
}
blobFileWrite(filename: string, blobfile: Blob) {
const reader = new FileReader();
// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e: any) => {
const text = e.srcElement.result;
this.fileWrite(filename, text);
});
// Start reading the blob as text.
reader.readAsText(blobfile);
}
fileWrite(filename: string, filedata: string) {
try {
Filesystem.writeFile({
path: filename,
data: filedata
// ,
// directory: FilesystemDirectory.Documents,
// encoding: FilesystemEncoding.UTF8
});
} catch (e) {
console.error('Unable to write file', e);
}
}
