Hi there
I’m hoping someone can help me out with a problem I’m facing. I’m trying to make an offline app for a sales team, which sell kettles. They have about 800 kettles in their inventory and most of their client interactions will be in an offline environment.
To display the images for the kettles I’m trying to download the images, this means that I’ve got roughly 800 images of the kettles - 1600 if I use thumbnails. I’m using the file Transfer plugin to do this so far but the results I am getting are inconsistent, sometimes it downloads the image, sometimes it doesn’t and sometimes I get a file path but the file doesn’t exist.
This is the code I’m using to get all the downloads
downloadImages( kettles) {
const downloader$ = [];
for ( const kettle of kettles ) {
downloader$.push( this.download( kettle ) );
}
console.log( downloader$ );
return Observable.forkJoin( downloader$ );
}
download( kettle: Kettle ) {
const fullImage$ = new Observable<string>( observer => {
const fileTransfer: FileTransferObject = this.transfer.create();
this.file.checkFile( encodeURI( this.file.dataDirectory ), kettle.title + '.' + kettle.image.split( '.' ).pop() ).then( () => {
observer.next( this.file.dataDirectory + kettle.title + '.' + kettle.image.split( '.' ).pop() );
}, () => {
fileTransfer.download( encodeURI( kettle.image ), encodeURI( this.file.dataDirectory + kettle.title + '.' + kettle.image.split( '.' ).pop() ) ).then( ( entry ) => {
observer.next( entry.toURL() );
}, () => {
observer.next( kettle.image );
} );
} );
} );
const thumbnail$ = new Observable<string>( observer => {
const fileTransfer: FileTransferObject = this.transfer.create();
this.file.checkFile( encodeURI( this.file.dataDirectory ), kettle.title + '.' + kettle.thumbnail.split( '.' ).pop() ).then( () => {
observer.next( this.file.dataDirectory + kettle.title + '.' + kettle.thumbnail.split( '.' ).pop() );
}, () => {
fileTransfer.download( encodeURI( kettle.thumbnail ), encodeURI( this.file.dataDirectory + kettle.title + '.' + kettle.thumbnail.split( '.' ).pop() ) ).then( ( entry ) => {
observer.next( entry.toURL() );
}, () => {
observer.next( kettle.thumbnail );
} );
} );
} );
Is there any easier way to go about this, or am I just doing it wrong? I’m using ngrx as well if it makes things different.