feat(): replace FileTransfer plugin with HttpClient (#125)

Author: westphalen

CHANGELOG.md

@@ -1,3 +1,12 @@
+<a name="4.2.2"></a>
+## [4.2.2](https://github.com/zyra/ionic-image-loader/compare/v4.2.1...v4.2.2) (2018-01-13)
+
+
+### Compatibility
+
+* **provider:** use Angular HttpClient instead of deprecated FileTransfer plugin, closes ([#124](https://github.com/zyra/ionic-image-loader/issues/124))
+
+
 <a name="4.2.1"></a>
 ## [4.2.1](https://github.com/zyra/ionic-image-loader/compare/v4.2.0...v4.2.1) (2017-09-07)
 

README.md

@@ -3,7 +3,8 @@
 [![npm](https://img.shields.io/npm/dm/ionic-image-loader.svg)](https://www.npmjs.com/package/ionic-image-loader)
 
 # Ionic Image Loader
-**Ionic** Module that loads images in a native background thread and caches them for later use. Uses `cordova-plugin-file` and `cordova-plugin-file-transfer` via [`ionic-native`](https://github.com/driftyco/ionic-native) wrappers.
+**Ionic** Module that loads images in a background thread and caches them for later use. Uses `HttpClient` from `Angular 4+`, and `cordova-plugin-file` via [`ionic-native`](https://github.com/driftyco/ionic-native) wrappers.
+
 
 ## Features
 - Downloads images via a **native thread**. Images will download faster and they will not use the Webview's resources.
@@ -36,9 +37,6 @@ npm install --save ionic-image-loader
 ```
 npm i --save @ionic-native/file
 ionic cordova plugin add cordova-plugin-file
-
-npm i --save @ionic-native/file-transfer
-ionic cordova plugin add cordova-plugin-file-transfer
 ```
 
 #### 3. Import `IonicImageLoader` module
@@ -267,13 +265,12 @@ Example:
 this.imageLoaderConfig.enableFallbackAsPlaceholder(true);
 ```
 ---
-#### setFileTransferOptions(options: any)
-Set options for FileTransfer plugin to use. If you would like to set a value for the `trustAllHosts` param, you can add it to the options object.
+#### setHttpRequestOptions(options: any)
+Set options for HttpClient to use.
 
 Example:
 ```ts
-this.imageLoaderConfig.setFileTransferOptions({
-  trustAllHosts: true, // defaults to false
+this.imageLoaderConfig.setHttpRequestOptions({
   headers: {
     Authorization: 'Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=='
   }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-image-loader",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "Ionic Component and Service to load images in a background thread and cache them for later use",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -39,15 +39,13 @@
     "@angular/platform-browser-dynamic": "4.4.4",
     "@ionic-native/core": "^4.3.3",
     "@ionic-native/file": "^4.3.3",
-    "@ionic-native/file-transfer": "^4.3.3",
     "conventional-changelog-cli": "1.3.4",
     "ionic-angular": "3.8.0",
     "rxjs": "5.4.3",
     "typescript": "2.3.4",
     "zone.js": "0.8.18"
   },
   "peerDependencies": {
-    "@ionic-native/file": "^4.0.0",
-    "@ionic-native/file-transfer": "^4.0.0"
+    "@ionic-native/file": "^4.0.0"
   }
 }

package.json

@@ -1,17 +1,18 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { ImgLoader } from './components/img-loader';
 import { ImageLoader } from './providers/image-loader';
 import { ImageLoaderConfig } from './providers/image-loader-config';
 import { IonicModule } from 'ionic-angular';
 import { File } from '@ionic-native/file';
-import { FileTransfer } from '@ionic-native/file-transfer';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
     ImgLoader
   ],
   imports: [
-    IonicModule
+    IonicModule,
+    HttpClientModule,
   ],
   exports: [
     ImgLoader
@@ -25,7 +26,6 @@ export class IonicImageLoader {
         ImageLoaderConfig,
         ImageLoader,
         File,
-        FileTransfer
       ]
     };
   }

src/image-loader.module.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { HttpHeaders } from '@angular/common/http';
 
 @Injectable()
 export class ImageLoaderConfig {
@@ -35,9 +36,7 @@ export class ImageLoaderConfig {
 
   spinnerColor: string;
 
-  fileTransferOptions: any = {
-    trustAllHosts: false
-  };
+  httpHeaders: HttpHeaders;
 
   private _cacheDirectoryName: string = 'image-loader-cache';
 
@@ -186,12 +185,21 @@ export class ImageLoaderConfig {
     this.spinnerColor = color;
   }
 
+  /**
+   * Set headers options for the HttpClient transfers.
+   * @param headers
+   */
+  setHttpHeaders(headers: HttpHeaders): void {
+    this.httpHeaders = headers;
+  }
+
   /**
    * Set options for the FileTransfer plugin
    * @param options
+   * @deprecated FileTransfer plugin removed.
    */
   setFileTransferOptions(options: { trustAllHosts: boolean; [key: string]: any; }): void {
-    this.fileTransferOptions = options;
+    // do nothing, plugin deprecated.
   }
 
 }

src/providers/image-loader-config.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { File, FileEntry, FileError, DirectoryEntry } from '@ionic-native/file';
-import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
+import { DirectoryEntry, File, FileEntry, FileError } from '@ionic-native/file';
+import { HttpClient } from '@angular/common/http';
 import { ImageLoaderConfig } from "./image-loader-config";
 import { Platform } from 'ionic-angular';
 import { Observable } from 'rxjs/Observable';
@@ -22,7 +22,7 @@ interface QueueItem {
 export class ImageLoader {
 
   get nativeAvailable(): boolean {
-    return File.installed() && FileTransfer.installed();
+    return File.installed();
   }
 
   /**
@@ -51,8 +51,6 @@ export class ImageLoader {
    */
   private queue: QueueItem[] = [];
 
-  private transferInstances: FileTransferObject[] = [];
-
   private processing: number = 0;
 
   private cacheIndex: IndexItem[] = [];
@@ -76,7 +74,7 @@ export class ImageLoader {
   constructor(
     private config: ImageLoaderConfig,
     private file: File,
-    private fileTransfer: FileTransfer,
+    private http: HttpClient,
     private platform: Platform
   ) {
     if (!platform.is('cordova')) {
@@ -239,16 +237,6 @@ export class ImageLoader {
     // take the first item from queue
     const currentItem: QueueItem = this.queue.splice(0, 1)[0];
 
-    // create FileTransferObject instance if needed
-    // we would only reach here if current jobs < concurrency limit
-    // so, there's no need to check anything other than the length of
-    // the FileTransferObject instances we have in memory
-    if (this.transferInstances.length === 0) {
-      this.transferInstances.push(this.fileTransfer.create());
-    }
-
-    const transfer: FileTransferObject = this.transferInstances.splice(0, 1)[0];
-
     // process more items concurrently if we can
     if (this.canProcess) this.processQueue();
 
@@ -257,29 +245,30 @@ export class ImageLoader {
     // then will execute this function again to process any remaining items
     const done = () => {
       this.processing--;
-      this.transferInstances.push(transfer);
       this.processQueue();
     };
 
-    const localPath = this.file.cacheDirectory + this.config.cacheDirectoryName + '/' + this.createFileName(currentItem.imageUrl);
+    const localDir = this.file.cacheDirectory + this.config.cacheDirectoryName + '/';
+    const fileName = this.createFileName(currentItem.imageUrl);
 
-    transfer.download(currentItem.imageUrl, localPath, Boolean(this.config.fileTransferOptions.trustAllHosts), this.config.fileTransferOptions)
-      .then((file: FileEntry) => {
+    this.http.get(currentItem.imageUrl, {
+      responseType: 'blob',
+      headers: this.config.httpHeaders,
+    }).subscribe((data: Blob) => {
+      this.file.writeFile(localDir, fileName, data).then((file: FileEntry) => {
         if (this.shouldIndex) {
           this.addFileToIndex(file).then(this.maintainCacheSize.bind(this));
         }
         return this.getCachedImagePath(currentItem.imageUrl);
-      })
-      .then((localUrl) => {
+      }).then((localUrl) => {
         currentItem.resolve(localUrl);
         done();
-      })
-      .catch((e) => {
+      }).catch((e) => {
         currentItem.reject();
         this.throwError(e);
         done();
       });
-
+    });
   }
 
   /**