diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1636a8..084c60c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+
+## [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))
+
+
## [4.2.1](https://github.com/zyra/ionic-image-loader/compare/v4.2.0...v4.2.1) (2017-09-07)
diff --git a/README.md b/README.md
index 92f5a61..991cf66 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,8 @@
[](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=='
}
diff --git a/package-lock.json b/package-lock.json
index 67d163a..6b1febc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "ionic-image-loader",
- "version": "4.2.1",
+ "version": "4.2.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -99,12 +99,6 @@
"integrity": "sha512-r273zw1gkgGTmlapyJnh31Yemt1P8u1CnTtiZGr3oC/BdlSvLppR7ONW7KbsAxA31UIDAXG+mXP3EqEP2AtVvw==",
"dev": true
},
- "@ionic-native/file-transfer": {
- "version": "4.3.3",
- "resolved": "https://registry.npmjs.org/@ionic-native/file-transfer/-/file-transfer-4.3.3.tgz",
- "integrity": "sha512-NRs2Nl2+Zzk4tVXESssV9DcYKvzmgUn6e1+MwxJ+QmVoQNmeSPNRnFSQoqE+IEkCjENjK1Yg0XJFfcDBpyCp6Q==",
- "dev": true
- },
"JSONStream": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
diff --git a/package.json b/package.json
index 2b82490..4bdd120 100644
--- a/package.json
+++ b/package.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,7 +39,6 @@
"@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",
@@ -47,7 +46,6 @@
"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"
}
}
diff --git a/src/image-loader.module.ts b/src/image-loader.module.ts
index 6573125..b5371b3 100644
--- a/src/image-loader.module.ts
+++ b/src/image-loader.module.ts
@@ -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
]
};
}
diff --git a/src/providers/image-loader-config.ts b/src/providers/image-loader-config.ts
index c5cf19a..d802b0d 100644
--- a/src/providers/image-loader-config.ts
+++ b/src/providers/image-loader-config.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.
}
}
diff --git a/src/providers/image-loader.ts b/src/providers/image-loader.ts
index f7930f5..6d3461d 100644
--- a/src/providers/image-loader.ts
+++ b/src/providers/image-loader.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();
});
-
+ });
}
/**