Updating Angular Version to 6

Updating Naming and Files to Work With Services
Improving ReadME
2018-05-23 16:23:19 -03:00 · 2018-05-23 12:35:49 -03:00 · 2018-03-09 10:22:26 -03:00 · 2018-03-09 10:07:00 -03:00 · 2018-02-23 13:03:05 -03:00 · 2018-02-09 22:48:17 -02:00
31 changed files with 20160 additions and 1132 deletions
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -1,57 +0,0 @@
-{
-  "project": {
-    "name": "ng2-file-upload"
-  },
-  "apps": [
-    {
-      "root": "demo/src",
-      "outDir": "demo/dist",
-      "assets": [
-        "assets"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "test": "../../scripts/test.ts",
-      "tsconfig": "tsconfig.json",
-      "prefix": "",
-      "mobile": false,
-      "styles": [
-      ],
-      "scripts": [
-      ],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "addons": [],
-  "packages": [],
-  "e2e": {
-    "protractor": {
-      "config": "protractor.conf.js"
-    }
-  },
-  "test": {
-    "karma": {
-      "config": "karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "prefixInterfaces": false,
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
-  }
-}
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,11 +0,0 @@
-# http://editorconfig.org
-
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,108 +1,108 @@
 <a name="1.3.0"></a>
-# [1.3.0](https://github.com/valor-software/ng2-file-upload/compare/v1.2.0...v1.3.0) (2017-11-25)
+# [1.3.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.2.0...v1.3.0) (2017-11-25)


 ### Features

-* **file-upload:** Add response and function to modify the request body ([#901](https://github.com/valor-software/ng2-file-upload/pull/901))
-* **file-upload** add file type .zip ([#911](https://github.com/valor-software/ng2-file-upload/pull/911))
+* **file-upload:** Add response and function to modify the request body ([#901](https://github.com/valor-software/ng2-chunk-file-upload/pull/901))
+* **file-upload** add file type .zip ([#911](https://github.com/valor-software/ng2-chunk-file-upload/pull/911))

 ### Bug Fixes
-* **file-uploader** Update: setOptions ([#904](https://github.com/valor-software/ng2-file-upload/pull/904))
-* **docs** Fix correct path for isHTML5 option ([#844](https://github.com/valor-software/ng2-file-upload/pull/844))
-* **docs** Added onFileDrop() event to documentation ([#857](https://github.com/valor-software/ng2-file-upload/pull/857))
+* **file-uploader** Update: setOptions ([#904](https://github.com/valor-software/ng2-chunk-file-upload/pull/904))
+* **docs** Fix correct path for isHTML5 option ([#844](https://github.com/valor-software/ng2-chunk-file-upload/pull/844))
+* **docs** Added onFileDrop() event to documentation ([#857](https://github.com/valor-software/ng2-chunk-file-upload/pull/857))


 <a name="1.2.1"></a>
-## [1.2.1](https://github.com/valor-software/ng2-file-upload/compare/v1.2.0...v1.2.1) (2017-04-10)
+## [1.2.1](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.2.0...v1.2.1) (2017-04-10)


 ### Features

-* **package:** relaxed peer dependencies to allow ng v4  ([#713](https://github.com/valor-software/ng2-file-upload/issues/713)) ([7704e0e](https://github.com/valor-software/ng2-file-upload/commit/7704e0e))
+* **package:** relaxed peer dependencies to allow ng v4  ([#713](https://github.com/valor-software/ng2-chunk-file-upload/issues/713)) ([7704e0e](https://github.com/valor-software/ng2-chunk-file-upload/commit/7704e0e))



 <a name="1.2.0"></a>
-# [1.2.0](https://github.com/valor-software/ng2-file-upload/compare/v1.1.3-0...v1.2.0) (2017-01-17)
+# [1.2.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.3-0...v1.2.0) (2017-01-17)


 ### Bug Fixes

-* **headers:** Add FileItem headers to XHR ([#553](https://github.com/valor-software/ng2-file-upload/issues/553)) ([e4a7099](https://github.com/valor-software/ng2-file-upload/commit/e4a7099)), closes [#552](https://github.com/valor-software/ng2-file-upload/issues/552)
+* **headers:** Add FileItem headers to XHR ([#553](https://github.com/valor-software/ng2-chunk-file-upload/issues/553)) ([e4a7099](https://github.com/valor-software/ng2-chunk-file-upload/commit/e4a7099)), closes [#552](https://github.com/valor-software/ng2-chunk-file-upload/issues/552)


 ### Features

-* **file-select:** Clear file select automatically ([#524](https://github.com/valor-software/ng2-file-upload/issues/524)) ([410efda](https://github.com/valor-software/ng2-file-upload/commit/410efda))
-* **fileUpload:** added additionalParameter ([#565](https://github.com/valor-software/ng2-file-upload/issues/565)) ([397de09](https://github.com/valor-software/ng2-file-upload/commit/397de09))
-* **package:** upgrade to ng v2.3+ ([#574](https://github.com/valor-software/ng2-file-upload/issues/574)) ([3cc6a99](https://github.com/valor-software/ng2-file-upload/commit/3cc6a99))
+* **file-select:** Clear file select automatically ([#524](https://github.com/valor-software/ng2-chunk-file-upload/issues/524)) ([410efda](https://github.com/valor-software/ng2-chunk-file-upload/commit/410efda))
+* **fileUpload:** added additionalParameter ([#565](https://github.com/valor-software/ng2-chunk-file-upload/issues/565)) ([397de09](https://github.com/valor-software/ng2-chunk-file-upload/commit/397de09))
+* **package:** upgrade to ng v2.3+ ([#574](https://github.com/valor-software/ng2-chunk-file-upload/issues/574)) ([3cc6a99](https://github.com/valor-software/ng2-chunk-file-upload/commit/3cc6a99))



 <a name="1.1.3-0"></a>
-## [1.1.3-0](https://github.com/valor-software/ng2-file-upload/compare/v1.1.2...v1.1.3-0) (2016-10-19)
+## [1.1.3-0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.2...v1.1.3-0) (2016-10-19)


 ### Bug Fixes

-* **typing:** added authTokenHeader property to options and file upload class ([b55c852](https://github.com/valor-software/ng2-file-upload/commit/b55c852))
+* **typing:** added authTokenHeader property to options and file upload class ([b55c852](https://github.com/valor-software/ng2-chunk-file-upload/commit/b55c852))


 ### Features

-* **build:** added support for AoT and ng-cli ([f0b2879](https://github.com/valor-software/ng2-file-upload/commit/f0b2879)), closes [#436](https://github.com/valor-software/ng2-file-upload/issues/436)
-* **file-upload:** Add the possibility of set the token header ([#213](https://github.com/valor-software/ng2-file-upload/issues/213)) ([282295c](https://github.com/valor-software/ng2-file-upload/commit/282295c))
+* **build:** added support for AoT and ng-cli ([f0b2879](https://github.com/valor-software/ng2-chunk-file-upload/commit/f0b2879)), closes [#436](https://github.com/valor-software/ng2-chunk-file-upload/issues/436)
+* **file-upload:** Add the possibility of set the token header ([#213](https://github.com/valor-software/ng2-chunk-file-upload/issues/213)) ([282295c](https://github.com/valor-software/ng2-chunk-file-upload/commit/282295c))



 <a name="1.1.2"></a>
-## [1.1.2](https://github.com/valor-software/ng2-file-upload/compare/v1.1.1...v1.1.2) (2016-10-17)
+## [1.1.2](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.1...v1.1.2) (2016-10-17)


 ### Features

-* **package:** allow of ng2 v2.0.* and v2.*.* ([87395e6](https://github.com/valor-software/ng2-file-upload/commit/87395e6))
+* **package:** allow of ng2 v2.0.* and v2.*.* ([87395e6](https://github.com/valor-software/ng2-chunk-file-upload/commit/87395e6))



 <a name="1.1.1"></a>
-## [1.1.1](https://github.com/valor-software/ng2-file-upload/compare/v1.0.3...v1.1.1) (2016-10-17)
+## [1.1.1](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.3...v1.1.1) (2016-10-17)


 ### Bug Fixes

-* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-file-upload/commit/e068511))
-* **zone.js:**  error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-file-upload/commit/db77e89))
+* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-chunk-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-chunk-file-upload/commit/e068511))
+* **zone.js:**  error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-chunk-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-chunk-file-upload/commit/db77e89))


 ### Features

-* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-file-upload/commit/22307d2))
-* **package:** angular ~2.0.1 stable release ([#425](https://github.com/valor-software/ng2-file-upload/issues/425)) ([3fec385](https://github.com/valor-software/ng2-file-upload/commit/3fec385))
-* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496))
+* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-chunk-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-chunk-file-upload/commit/22307d2))
+* **package:** angular ~2.0.1 stable release ([#425](https://github.com/valor-software/ng2-chunk-file-upload/issues/425)) ([3fec385](https://github.com/valor-software/ng2-chunk-file-upload/commit/3fec385))
+* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-chunk-file-upload/commit/4fef496))



 <a name="1.1.0"></a>
-# [1.1.0](https://github.com/valor-software/ng2-file-upload/compare/v1.0.3...v1.1.0) (2016-09-21)
+# [1.1.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.3...v1.1.0) (2016-09-21)


 ### Bug Fixes

-* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-file-upload/commit/e068511))
-* **zone.js:**  error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-file-upload/commit/db77e89))
+* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-chunk-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-chunk-file-upload/commit/e068511))
+* **zone.js:**  error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-chunk-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-chunk-file-upload/commit/db77e89))


 ### Features

-* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-file-upload/commit/22307d2))
-* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496))
+* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-chunk-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-chunk-file-upload/commit/22307d2))
+* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-chunk-file-upload/commit/4fef496))



 <a name="1.0.3"></a>
-## [1.0.3](https://github.com/valor-software/ng2-file-upload/compare/v1.0.2...v1.0.3) (2016-05-12)
+## [1.0.3](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.2...v1.0.3) (2016-05-12)



@@ -112,17 +112,17 @@

 ### Bug Fixes

-* **upload:** merge fix and get filters fix ([ef6091c](https://github.com/valor-software/ng2-file-upload/commit/ef6091c))
+* **upload:** merge fix and get filters fix ([ef6091c](https://github.com/valor-software/ng2-chunk-file-upload/commit/ef6091c))


 ### Chores

-* **build:** ng2 style guide applied ([aee69d8](https://github.com/valor-software/ng2-file-upload/commit/aee69d8))
+* **build:** ng2 style guide applied ([aee69d8](https://github.com/valor-software/ng2-chunk-file-upload/commit/aee69d8))


 ### Features

-* **package:** upgrade to angular 2.0.0-rc.1 ([#176](https://github.com/valor-software/ng2-file-upload/issues/176)) ([13c5c35](https://github.com/valor-software/ng2-file-upload/commit/13c5c35)), closes [#180](https://github.com/valor-software/ng2-file-upload/issues/180)
+* **package:** upgrade to angular 2.0.0-rc.1 ([#176](https://github.com/valor-software/ng2-chunk-file-upload/issues/176)) ([13c5c35](https://github.com/valor-software/ng2-chunk-file-upload/commit/13c5c35)), closes [#180](https://github.com/valor-software/ng2-chunk-file-upload/issues/180)


 ### BREAKING CHANGES
--- a/README.md
+++ b/README.md
@@ -1,31 +1,31 @@
-# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com)
-Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/))
+# ng2-chunk-file-upload [![npm version](https://badge.fury.io/js/ng2-chunk-file-upload.svg)](http://badge.fury.io/js/ng2-chunk-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-chunk-file-upload.svg)](https://npmjs.org/ng2-chunk-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com)
+Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-chunk-file-upload/))

 [![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)
-[![Build Status](https://travis-ci.org/valor-software/ng2-file-upload.svg?branch=development)](https://travis-ci.org/valor-software/ng2-file-upload)
-[![Dependency Status](https://david-dm.org/valor-software/ng2-file-upload.svg)](https://david-dm.org/valor-software/ng2-file-upload)
+[![Build Status](https://travis-ci.org/valor-software/ng2-chunk-file-upload.svg?branch=development)](https://travis-ci.org/valor-software/ng2-chunk-file-upload)
+[![Dependency Status](https://david-dm.org/valor-software/ng2-chunk-file-upload.svg)](https://david-dm.org/valor-software/ng2-chunk-file-upload)

 ## Quick start

-1. A recommended way to install ***ng2-file-upload*** is through [npm](https://www.npmjs.com/search?q=ng2-file-upload) package manager using the following command:
+1. A recommended way to install ***ng2-chunk-file-upload*** is through [npm](https://www.npmjs.com/search?q=ng2-chunk-file-upload) package manager using the following command:

-  `npm i ng2-file-upload --save`
+  `npm i ng2-chunk-file-upload --save`

-  Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-file-upload/archive/master.zip).
+  Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-chunk-file-upload/archive/master.zip).

-2. Currently `ng2-file-upload` contains two directives: `ng2-file-select` and `ng2-file-drop`. `ng2-file-select` is used for 'file-input' field of form and
+2. Currently `ng2-chunk-file-upload` contains two directives: `ng2-file-select` and `ng2-file-drop`. `ng2-file-select` is used for 'file-input' field of form and
  `ng2-file-drop` is used for area that will be used for dropping of file or files.

-3. More information regarding using of ***ng2-file-upload*** is located in
-  [demo](http://valor-software.github.io/ng2-file-upload/) and [demo sources](https://github.com/valor-software/ng2-file-upload/tree/master/demo).
+3. More information regarding using of ***ng2-chunk-file-upload*** is located in
+  [demo](http://valor-software.github.io/ng2-chunk-file-upload/) and [demo sources](https://github.com/valor-software/ng2-chunk-file-upload/tree/master/demo).
  
-## Using ***ng2-file-upload*** in a project
+## Using ***ng2-chunk-file-upload*** in a project

 1. Install as shown in the above section.

-2. Import `FileUploadModule` into the module that declares the component using ***ng2-file-upload***:
+2. Import `FileUploadModule` into the module that declares the component using ***ng2-chunk-file-upload***:

-```import { FileUploadModule } from 'ng2-file-upload';```
+```import { FileUploadModule } from 'ng2-chunk-file-upload';```

 3. Add it to `[imports]` under `@NgModule`:

@@ -33,7 +33,7 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g

 4. Import `FileUploader` into the component:

-```import {  FileUploader } from 'ng2-file-upload';```
+```import {  FileUploader } from 'ng2-chunk-file-upload';```

 5. Create a variable for the API url:

@@ -47,7 +47,7 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g

 ### Properties

-  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
+  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)

 ### Events
 - `onFileSelected` - fires when files are selected and added to the uploader queue
@@ -56,7 +56,7 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g

 ### Properties

-  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
+  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)

  Parameters supported by this object:

@@ -67,23 +67,89 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g
  5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.
  6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.
  7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false.
+  8. `chunkSize` - The Size of each chunk in Bytes, if this parameter is set the file chunk upload functionality will run. Defaults to Null.
+  9. `currentChunkParam` - Parameter Sent with the chunk request, the current chunk number of the file. Defaults to 'current_chunk'.
+  10. `totalChunkParam` - Parameter Sent with the chunk request, the total number of chunks of the file. Defaults to 'total_chunks'.
+  11. `chunkMethod` - After the first chunk, this method is set. Defaults to 'PUT' because is the standard for update.
+  

 ### Events

  - `fileOver` - it fires during 'over' and 'out' events for Drop Area; returns `boolean`: `true` if file is over Drop Area, `false` in case of out.
-  See using in [ts demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
-  [html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
+  See using in [ts demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
+  [html demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
  - `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"`

 # Troubleshooting

 Please follow this guidelines when reporting bugs and feature requests:

-1. Use [GitHub Issues](https://github.com/valor-software/ng2-file-upload/issues) board to report bugs and feature requests (not our email address)
+1. Use [GitHub Issues](https://github.com/valor-software/ng2-chunk-file-upload/issues) board to report bugs and feature requests (not our email address)
 2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

 Thanks for understanding!

+## Using/Sending Chunk Files Feature
+  
+  If you want to send the files chunked you can just set the chunk paramets on the uploader object
+
+  If your chunk request changes the link after the first request you should use this code
+  ```typescript
+  this.uploader.onCompleteChunk = (item,response,status,headers)=>{
+        response = JSON.parse(response);
+        if(response['id']){
+            item.url = YOUR_NEW_URL+response['id']+'/';
+        }
+    }
+  ```
+
+### Code snippet on how to use the Chunk File Feature on your code
+  ```typescript
+    ...
+    import { FileUploader } from 'ng2-chunk-file-upload';
+    ...
+    export class SimpleDemoComponent {
+      ...
+      uploader:FileUploader;
+      ...
+      constructor () {
+        ...
+          this.uploader = new FileUploader({
+            url: URL,
+            disableMultipart : false,
+            isHTML5: true,
+            chunkSize: (1024*1024), // 2MB
+            currentChunkParam: 'current_chunk',
+            totalChunkParam: 'total_chunks',
+            chunkMethod: 'PUT',
+            //authToken = 'JWT '+TOKEN,
+          });
+          this.uploader.onBeforeUploadItem = (item) => {
+              // If you use credentials this might help you with the "Access-Control-Allow-Origin" error
+              item.withCredentials = false;
+          };
+          this.uploader.onCompleteChunk = (item, response, status, headers) => {
+            //Insert the Logic here to start uploading next chunks
+            // Example, setting the ID of the File uploaded and chaning the link for the next request
+            // In my Case the API is using a put method with the link containing the PK of the object
+            response = JSON.parse(response);
+            if (response['id']) {
+                item.setId(response['id']);
+                item.url = this.media_url + item.getId() + '/';
+            }
+          };
+          this.uploader.onErrorItem = (item, response, status, headers) => {
+             // Treat the error on the upload
+             // On the chunk method we try to upload a chunk for 10 times before triggering this error
+          };
+          this.uploader.onRemoveItem = (item) => {
+             // Treat the file removal from the server
+          };
+        ...
+      }
+  ```
+
+
 ### License

-The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-file-upload/blob/master/LICENSE) file for the full text)
+The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/LICENSE) file for the full text)
--- a/angular.json
+++ b/angular.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng2-chunk-file-upload": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "demo/dist",
+            "index": "demo/src/index.html",
+            "main": "demo/src/main.ts",
+            "tsConfig": "demo/src/tsconfig.json",
+            "assets": [
+              "demo/src/assets"
+            ],
+            "styles": [],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "demo/src/environments/environment.ts",
+                  "with": "demo/src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ng2-chunk-file-upload:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ng2-chunk-file-upload:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ng2-chunk-file-upload:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "demo/src/../../scripts/test.ts",
+            "karmaConfig": "karma.conf.js",
+            "scripts": [],
+            "styles": [],
+            "assets": [
+              "demo/src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "ng2-chunk-file-upload-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "protractor.conf.js",
+            "devServerTarget": "ng2-chunk-file-upload:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ng2-chunk-file-upload",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": ""
+    }
+  }
+}
--- a/demo/src/app/app.component.ts
+++ b/demo/src/app/app.component.ts
@@ -7,12 +7,18 @@ let gettingStarted = require('html-loader!markdown-loader!../getting-started.md'
 	template: `
 	<main class="bd-pageheader">
 		<div class="container">
-      <h1>ng2-file-upload</h1>
+		<h1>ng2-chunk-file-upload</h1>
 		<p>The Angular2 File Upload directives</p>
-      <a class="btn btn-primary" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
+		<a class="btn btn-primary" href="https://github.com/valor-software/ng2-chunk-file-upload">View on GitHub</a>
 		<div class="row">
-        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
-        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
+			<div class="col-lg-1">
+				<iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-chunk-file-upload&type=star&count=true"
+				 frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
+			</div>
+			<div class="col-lg-1">
+				<iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-chunk-file-upload&type=fork&count=true"
+				 frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
+			</div>
 		</div>
 		</div>
 	</main>
@@ -25,15 +31,17 @@ let gettingStarted = require('html-loader!markdown-loader!../getting-started.md'

 	<footer class="footer">
 		<div class="container">
-      <p class="text-muted text-center"><a href="https://github.com/valor-software/ng2-file-upload">ng2-file-upload</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p>
+		<p class="text-muted text-center">
+			<a href="https://github.com/valor-software/ng2-chunk-file-upload">ng2-chunk-file-upload</a>
+			 is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p>
 		</div>
 	</footer>
-  `
+	`,
 })
 export class AppComponent {
-  public gettingStarted:string = gettingStarted;
+	public gettingStarted: string = gettingStarted;
 	public ngAfterContentInit(): any {
-    setTimeout(()=>{
+		setTimeout(() => {
 			if (typeof PR !== 'undefined') {
 				// google code-prettify
 				PR.prettyPrint();
--- a/demo/src/app/app.module.ts
+++ b/demo/src/app/app.module.ts
@@ -4,16 +4,24 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';

 import { TabsModule } from 'ngx-bootstrap/tabs';
-import { FileUploadModule } from 'ng2-file-upload';
+import { FileUploadModule } from '../../../src/file-upload/file-upload.module';

 import { AppComponent } from './app.component';
+
 import { FileUploadSectionComponent } from './components/file-upload-section';
 import { SimpleDemoComponent } from './components/file-upload/simple-demo';
+import { HttpModule } from '@angular/http';

@NgModule({
-  imports: [BrowserModule, CommonModule, FileUploadModule, TabsModule.forRoot(), FormsModule],
+	imports: [
+		HttpModule,
+		BrowserModule,
+		CommonModule,
+		FileUploadModule,
+		TabsModule.forRoot(),
+		FormsModule,
+	],
 	declarations: [AppComponent, FileUploadSectionComponent, SimpleDemoComponent],
-  bootstrap: [AppComponent]
+	bootstrap: [AppComponent],
 })
-export class AppModule {
-}
+export class AppModule {}
--- a/demo/src/app/components/file-upload-section.ts
+++ b/demo/src/app/components/file-upload-section.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';

 let doc = require('html-loader!markdown-loader!../../doc.md');

-let tabDesc:Array<any> = [
+let tabDesc: Array<any> = [
 	{
 		heading: 'Simple',
 		ts: require('!!raw-loader?lang=typescript!./file-upload/simple-demo.ts'),
@@ -16,12 +16,12 @@ let tabDesc:Array<any> = [
 	templateUrl: './file-upload-section.html'
 })
 export class FileUploadSectionComponent {
-  public name:string = 'File Upload';
-  public currentHeading:string = 'Simple';
-  public doc:string = doc;
-  public tabs:any = tabDesc;
+	public name: string = 'File Upload';
+	public currentHeading: string = 'Simple';
+	public doc: string = doc;
+	public tabs: any = tabDesc;

-  public select(e:any):void {
+	public select(e: any): void {
 		if (e.heading) {
 			this.currentHeading = e.heading;
 		}
--- a/demo/src/app/components/file-upload/simple-demo.ts
+++ b/demo/src/app/components/file-upload/simple-demo.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FileUploader } from 'ng2-file-upload';
+import { FileUploader } from 'ng2-chunk-file-upload';

 // const URL = '/api/';
 const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
--- a/demo/src/doc.md
+++ b/demo/src/doc.md
@@ -1,6 +1,6 @@
 ### Usage
 ```typescript
-import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
+import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-chunk-file-upload/ng2-chunk-file-upload';
 ```

 ### Annotations
@@ -18,7 +18,7 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u

 ### Properties

-  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
+  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)

  Parameters supported by this object:

@@ -37,11 +37,11 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u

 ### Properties

-  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
+  - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)

 ### Events

  - `fileOver` - it fires during 'over' and 'out' events for Drop Area; returns `boolean`: `true` if file is over Drop Area, `false` in case of out.
-  See using in [ts demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
-  [html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
+  See using in [ts demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
+  [html demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
  - `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"`
--- a/demo/src/getting-started.md
+++ b/demo/src/getting-started.md
@@ -6,5 +6,5 @@

 Install the components
 ```
-npm install ng2-file-upload --save
+npm install ng2-chunk-file-upload --save
 ```
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -9,7 +9,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-  <link rel="author" href="https://github.com/valor-software/ng2-file-upload/graphs/contributors">
+  <link rel="author" href="https://github.com/valor-software/ng2-chunk-file-upload/graphs/contributors">

  <!--link to bootstrap.css-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
--- a/demo/src/tsconfig.json
+++ b/demo/src/tsconfig.json
@@ -5,18 +5,13 @@
        "experimentalDecorators": true,
        "noEmitHelpers": false,
        "lib": ["es6", "dom"],
-    "types": [
-      "jasmine",
-      "webpack"
-    ],
+        "types": ["jasmine", "webpack"],
        "mapRoot": "./",
        "module": "es6",
        "moduleResolution": "node",
        "outDir": "../temp/out-tsc",
        "sourceMap": true,
        "target": "es5",
-    "typeRoots": [
-      "../node_modules/@types"
-    ]
+        "typeRoots": ["../node_modules/@types"]
    }
 }
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -6,21 +6,21 @@ const customLaunchers = require('./scripts/sauce-browsers').customLaunchers;
 module.exports = function (config) {
  const configuration = {
    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
    ],
    files: [
      {pattern: './scripts/test.ts', watched: false}
    ],
    preprocessors: {
-      './scripts/test.ts': ['@angular/cli']
+      './scripts/test.ts': ['@angular-devkit/build-angular']
    },
    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: false
    },
    angularCli: {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "ng2-file-upload-base",
+  "name": "ng2-chunk-file-upload-base",
  "version": "1.3.0",
  "private": true,
-  "description": "Angular file upload directives",
+  "description": "Angular file upload directives with Chunk Upload",
  "scripts": {
    "lite-server": "lite-server -c demo/bs-config.json",
    "demo.serve": "run-s build link demo.build lite-server",
@@ -22,7 +22,7 @@
    "test-coverage": "ng test -sr -cc",
    "version": "npm run flow.changelog && git add -A"
  },
-  "main": "bundles/ng2-file-upload.umd.js",
+  "main": "bundles/ng2-chunk-file-upload.umd.js",
  "module": "index.js",
  "typings": "index.d.ts",
  "keywords": [
@@ -31,89 +31,98 @@
    "angularjs",
    "twitter-bootstrap",
    "file-upload",
-    "angular-file-upload"
+    "angular-file-upload",
+    "chunk-file-upload",
+    "azure-blob-storage"
  ],
-  "author": "Vyacheslav Chub <vyacheslav.chub@valor-software.com>",
+  "author": "Paulo Peres Jr <paulo@myog.io>",
  "license": "MIT",
  "repository": {
    "type": "git",
-    "url": "git+ssh://git@github.com/valor-software/ng2-file-upload.git"
+    "url": "git+ssh://git@github.com/PauloPeres/ng2-chunk-file-upload.git"
  },
  "bugs": {
-    "url": "https://github.com/valor-software/ng2-file-upload/issues"
+    "url": "https://github.com/PauloPeres/ng2-chunk-file-upload/issues"
  },
-  "homepage": "https://github.com/valor-software/ng2-file-upload#readme",
+  "homepage": "https://github.com/PauloPeres/ng2-chunk-file-upload#readme",
  "dependencies": {},
  "peerDependencies": {
-    "@angular/common": "^2.3.1 || >=4.0.0",
-    "@angular/core": "^2.3.1 || >=4.0.0"
+    "@angular/common": "^4.3.0 || >=4.3.0",
+    "@angular/core": "^4.3.0 || >=4.3.0",
+    "@angular/http": "^4.3.0 || >=4.3.0"
  },
  "devDependencies": {
-    "@angular/cli": "1.0.0",
-    "@angular/common": "2.4.3",
-    "@angular/compiler": "2.4.3",
-    "@angular/compiler-cli": "2.4.3",
-    "@angular/core": "2.4.3",
-    "@angular/forms": "2.4.3",
-    "@angular/http": "2.4.3",
-    "@angular/language-service": "2.4.3",
-    "@angular/platform-browser": "2.4.3",
-    "@angular/platform-browser-dynamic": "2.4.3",
-    "@angular/router": "3.4.3",
-    "@angular/tsc-wrapped": "0.5.1",
-    "@types/jasmine": "2.5.40",
-    "@types/marked": "0.0.28",
-    "@types/node": "7.0.0",
-    "@types/webpack": "^2.2.1",
-    "bootstrap": "3.3.7",
+    "@angular-devkit/build-angular": "~0.6.3",
+    "@angular/cdk": "^6.1.0",
+    "@angular/cli": "^6.0.3",
+    "@angular/common": "^6.0.1",
+    "@angular/compiler": "^6.0.1",
+    "@angular/compiler-cli": "^6.0.1",
+    "@angular/core": "^6.0.1",
+    "@angular/forms": "^6.0.1",
+    "@angular/http": "^6.0.1",
+    "@angular/language-service": "^6.0.1",
+    "@angular/material": "^6.1.0",
+    "@angular/platform-browser": "^6.0.1",
+    "@angular/platform-browser-dynamic": "^6.0.1",
+    "@angular/router": "^6.0.1",
+    "@angular/tsc-wrapped": "4.4.6",
+    "@types/jasmine": "2.8.7",
+    "@types/marked": "0.3.0",
+    "@types/node": "10.1.2",
+    "@types/webpack": "^4.4.0",
+    "ajv": "^6.0.0",
+    "bootstrap": "4.1.1",
    "chokidar-cli": "1.2.0",
-    "classlist-polyfill": "1.0.3",
-    "codecov": "1.0.1",
-    "codelyzer": "~2.0.0-beta.4",
-    "conventional-changelog-cli": "1.2.0",
-    "conventional-github-releaser": "1.1.3",
+    "classlist-polyfill": "1.2.0",
+    "codecov": "3.0.2",
+    "codelyzer": "~4.3.0",
+    "conventional-changelog-cli": "1.3.22",
+    "conventional-github-releaser": "2.0.2",
    "core-js": "^2.4.1",
-    "cpy": "5.0.0",
+    "cpy": "7.0.0",
    "cpy-cli": "1.0.1",
-    "del-cli": "0.2.1",
-    "gh-pages": "0.12.0",
+    "del-cli": "1.1.0",
+    "gh-pages": "1.1.0",
    "gitignore-to-glob": "0.3.0",
    "google-code-prettify": "1.0.5",
-    "html-loader": "0.4.4",
-    "jasmine": "2.5.3",
-    "jasmine-core": "2.5.2",
+    "html-loader": "0.5.5",
+    "jasmine": "3.1.0",
+    "jasmine-core": "3.1.0",
    "jasmine-data-provider": "2.2.0",
-    "jasmine-spec-reporter": "3.2.0",
-    "karma": "1.4.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "jquery": "^1.9.1",
+    "karma": "2.0.2",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.3.0",
+    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.0.2",
-    "karma-remap-istanbul": "0.4.0",
-    "karma-sauce-launcher": "1.1.0",
-    "lite-server": "2.2.2",
-    "lodash": "4.17.4",
-    "markdown-loader": "^0.1.7",
-    "marked": "0.3.6",
-    "ng2-page-scroll": "4.0.0-beta.2",
-    "ngm-cli": "0.4.0",
-    "ngx-bootstrap": "1.6.6",
+    "karma-remap-istanbul": "0.6.0",
+    "karma-sauce-launcher": "1.2.0",
+    "lite-server": "2.3.0",
+    "lodash": "4.17.10",
+    "markdown-loader": "^2.0.2",
+    "marked": "0.4.0",
+    "ngm-cli": "1.0.4",
+    "ngx-bootstrap": "3.0.0",
    "npm-run-all": "^4.0.1",
+    "popper.js": "^1.14.3",
    "pre-commit": "1.2.2",
-    "protractor": "5.0.0",
-    "reflect-metadata": "0.1.9",
-    "require-dir": "0.3.1",
-    "rxjs": "5.0.3",
-    "systemjs-builder": "0.15.34",
+    "protractor": "5.3.2",
+    "reflect-metadata": "0.1.12",
+    "require-dir": "1.0.0",
+    "rxjs": "^6.2.0",
+    "rxjs-compat": "^6.1.0",
+    "rxjs-tslint": "^0.1.4",
+    "systemjs-builder": "0.16.13",
    "ts-helpers": "^1.1.1",
-    "ts-node": "2.0.0",
-    "tslint": "4.3.1",
-    "tslint-config-valorsoft": "1.2.0",
-    "typedoc": "0.5.5",
-    "typescript": "2.1.5",
-    "wallaby-webpack": "0.0.30",
-    "webdriver-manager": "11.1.1",
-    "zone.js": "0.7.5"
+    "ts-node": "6.0.3",
+    "tslint": "5.10.0",
+    "typedoc": "0.11.1",
+    "typescript": "^2.7.2",
+    "wallaby-webpack": "3.9.8",
+    "webdriver-manager": "12.0.6",
+    "zone.js": "0.8.26"
  },
  "contributors": [
    {
@@ -135,6 +144,11 @@
      "name": "Oleksandr Telnov",
      "email": "otelnov@gmail.com",
      "url": "https://github.com/otelnov"
+    },
+    {
+      "name": "Paulo Peres Jr",
+      "email": "paulo@myog.io",
+      "url": "https://github.com/PauloPeres/"
    }
  ]
 }
--- a/src/file-upload/file-chunk.class.ts
+++ b/src/file-upload/file-chunk.class.ts
@@ -0,0 +1,242 @@
+export class FileChunk {
+	public stepSize: number = 1024 * 1024 * 3;
+	public rawFile: any = null;
+	public uploadProgress: number = null;
+	public uploading: boolean = null;
+	public uploadComplete: boolean = null;
+	public byteStepSize: number = null;
+	public totalSize: number = null;
+	public startByte: number = null;
+	public endByte: number = null;
+	public currentChunk: number = 0;
+	public totalChunks: number = null;
+	public uniqueIdentifier: string = null;
+	public totalSent: number = null;
+	public extraData: any = {};
+
+	constructor(rawFile: any, options: any = {}) {
+		this.setByteStepSize(this.stepSize);
+		if (typeof options !== 'undefined') {
+			if (typeof options.byteStepSize !== 'undefined') {
+				this.setByteStepSize(options.byteStepSize);
+			}
+		}
+		this.setRawFile(rawFile);
+
+		this.setRawFile(rawFile);
+		this.setUploadProgress(0);
+		this.setUploading(false);
+		this.setUploadComplete(false);
+		this.setTotalSize(this.getRawFile().size);
+		this.setStartByte(0);
+		this.setEndByte(this.getByteStepSize());
+		this.setCurrentChunk(0);
+		if (!this.getBrowserSliceMethod()) {
+			this.setTotalChunks(1);
+		} else {
+			this.setTotalChunks(Math.ceil(this.totalSize / this.byteStepSize));
+		}
+		this.setUniqueIdenfier(this.generateUniqueIdentifier());
+		this.setTotalSent(0);
+	}
+
+	public setExtraData(index: any, value: any) {
+		this.extraData[index] = value;
+	}
+
+	public getExtraData(index: any) {
+		return this.extraData[index];
+	}
+
+	//getters and setters
+	public setProgress(v: number) {
+		this.uploadProgress = v;
+	}
+
+	public getProgress():number {
+		return this.uploadProgress;
+	}
+
+	public setUploading(v: boolean) {
+		this.uploading = v;
+	}
+
+	public getUploading():boolean {
+		return this.uploading;
+	}
+
+	public getUploadComplete():boolean {
+		return this.uploadComplete;
+	}
+
+	public setUploadComplete(v: boolean) {
+		this.uploadComplete = v;
+	}
+
+	public setUploadProgress(v: number) {
+		this.uploadProgress = v;
+	}
+
+	public getUploadProgress():number {
+		return this.uploadProgress;
+	}
+
+	public getStartByte():number {
+		return this.startByte;
+	}
+
+	public setStartByte(v: number) {
+		this.startByte = v;
+	}
+
+	public getEndByte():number {
+		return this.endByte;
+	}
+
+	public setEndByte(v: number) {
+		this.endByte = v;
+	}
+
+	public getByteStepSize():number {
+		return this.byteStepSize;
+	}
+
+	public setByteStepSize(v: number) {
+		this.byteStepSize = v;
+	}
+
+	public setTotalSize(v: number) {
+		this.totalSize = v;
+	}
+
+	public getTotalSize():number {
+		return this.totalSize;
+	}
+
+	public getRawFile():any {
+		return this.rawFile;
+	}
+
+	public setRawFile(v: File) {
+		this.rawFile = v;
+	}
+
+	public getCurrentChunk():number {
+		return this.currentChunk;
+	}
+
+	public setCurrentChunk(v: number) {
+		this.currentChunk = v;
+	}
+
+	public getTotalChunks():number {
+		return this.totalChunks;
+	}
+
+	public setTotalChunks(v: number) {
+		this.totalChunks = v;
+	}
+
+	public setUniqueIdenfier(v: string) {
+		this.uniqueIdentifier = v;
+	}
+
+	public getUniqueIdenfier():string {
+		return this.uniqueIdentifier;
+	}
+
+	public getRawFileExtension() {
+		const extension = this.getRawFileName().split('.');
+		return extension[extension.length - 1];
+	}
+
+	public getRawFileName() {
+		return this.getRawFile().name;
+	}
+
+	public getContentType() {
+		return this.getRawFile().type;
+	}
+
+	public getTotalSent() {
+		return this.totalSent;
+	}
+
+	public setTotalSent(v: number) {
+		this.totalSent = v;
+	}
+
+	public getCurrentRawFileChunk() {
+		if (!this.getBrowserSliceMethod()) {
+			return this.getRawFile();
+		}
+		else {
+			return this.getRawFile()[this.getBrowserSliceMethod()](this.getStartByte(), this.getEndByte());
+		}
+	}
+
+	public retrocedeChunk() {
+		if (!this.getBrowserSliceMethod()) {
+			return false;
+		}
+
+		this.setEndByte(this.getStartByte());
+		this.setStartByte(this.getStartByte() - this.getByteStepSize());
+		this.setCurrentChunk(this.getCurrentChunk() - 1);
+
+		if (this.getTotalSent() != 0) {
+			this.setTotalSent(this.getTotalSent() - this.getByteStepSize());
+		}
+	}
+
+	public prepareNextChunk() {
+		if (!this.getBrowserSliceMethod()) {
+			return false;
+		}
+		if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() < this.getTotalChunks()) { // finished
+			return false;
+		}
+		this.setStartByte(this.getEndByte());
+		this.setEndByte(this.getEndByte() + this.getByteStepSize());
+		this.setCurrentChunk(this.getCurrentChunk() + 1);
+		if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() === this.getTotalChunks()) {
+			// something went wrong with the calculations
+			this.setEndByte(this.getTotalSize());
+		}
+		return true;
+	}
+
+	public getBrowserSliceMethod(): string {
+		if (this.rawFile && typeof this.rawFile !== 'undefined') {
+			if (this.rawFile.slice && typeof this.rawFile.slice === 'function') {
+				return 'slice';
+			}
+			else if (this.rawFile.mozSlice && typeof this.rawFile.mozSlice === 'function') {
+				return 'mozSlice';
+			}
+			else if (this.rawFile.webkitSlice && typeof this.rawFile.webkitSlice === 'function') {
+				return 'webkitSlice';
+			}
+		}
+		else {
+			return null;
+		}
+	}//getBrowserSliceMethod() ends here
+
+	public generateUniqueIdentifier(): string {
+		let d = new Date().getTime();
+		if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+			d += performance.now(); // use high-precision timer if available
+		}
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+			const r = (d + Math.random() * 16) % 16 | 0;
+			d = Math.floor(d / 16);
+			return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+		});
+	}
+
+}
+
+
+
+
--- a/src/file-upload/file-drop.directive.ts
+++ b/src/file-upload/file-drop.directive.ts
@@ -22,7 +22,7 @@ export class FileDropDirective {
 		return {};
 	}

-  @HostListener('drop', [ '$event' ])
+	@HostListener('drop', ['$event'])
 	public onDrop(event: any): void {
 		let transfer = this._getTransfer(event);
 		if (!transfer) {
@@ -37,7 +37,7 @@ export class FileDropDirective {
 		this.onFileDrop.emit(transfer.files);
 	}

-  @HostListener('dragover', [ '$event' ])
+	@HostListener('dragover', ['$event'])
 	public onDragOver(event: any): void {
 		let transfer = this._getTransfer(event);
 		if (!this._haveFiles(transfer.types)) {
@@ -49,10 +49,10 @@ export class FileDropDirective {
 		this.fileOver.emit(true);
 	}

-  @HostListener('dragleave', [ '$event' ])
+	@HostListener('dragleave', ['$event'])
 	public onDragLeave(event: any): any {
 		if ((this as any).element) {
-      if (event.currentTarget === (this as any).element[ 0 ]) {
+			if (event.currentTarget === (this as any).element[0]) {
 				return;
 			}
 		}
--- a/src/file-upload/file-item.class.ts
+++ b/src/file-upload/file-item.class.ts
@@ -1,9 +1,11 @@
+import { HttpHeaders } from '@angular/common/http';
 import { FileLikeObject } from './file-like-object.class';
-import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class';
-
+import { FileUploader, FileUploaderOptions } from './file-uploader.class';
+import { FileChunk } from './file-chunk.class'
 export class FileItem {
 	public file: FileLikeObject;
 	public _file: File;
+	public id: any;
 	public alias: string;
 	public url: string = '/';
 	public method: string;
@@ -16,11 +18,15 @@ export class FileItem {
 	public isSuccess: boolean = false;
 	public isCancel: boolean = false;
 	public isError: boolean = false;
+	public isRemoving: boolean = false;
 	public progress: number = 0;
 	public index: number = void 0;
-  public _xhr: XMLHttpRequest;
+	public downloadUrl?: string = null;
 	public _form: any;
+	public _fileChunks: FileChunk;
 	
+	protected chunkTotalRetries = 10;
+	protected chunkRetries = 0;
 	protected uploader: FileUploader;
 	protected some: File;
 	protected options: FileUploaderOptions;
@@ -31,58 +37,96 @@ export class FileItem {
 		this.options = options;
 		this.file = new FileLikeObject(some);
 		this._file = some;
+
 		if (uploader.options) {
 			this.method = uploader.options.method || 'POST';
 			this.alias = uploader.options.itemAlias || 'file';
 		}
 		this.url = uploader.options.url;
 	}
-
 	public upload(): void {
 		try {
 			this.uploader.uploadItem(this);
 		} catch (e) {
-      this.uploader._onCompleteItem(this, '', 0, {});
-      this.uploader._onErrorItem(this, '', 0, {});
+			this.uploader._onCompleteItem(this, '', 0, new HttpHeaders());
+			this.uploader._onErrorItem(this, '', 0, new HttpHeaders());
 		}
 	}
-
+	public createFileChunk(chunkSize: number): void {
+		this.fileChunks = new FileChunk(this._file, { byteStepSize: chunkSize });
+	}
+	public getCurrentChunkFile(): any {
+		return this.fileChunks.getCurrentRawFileChunk();
+	}
+	public prepareNextChunk(): void {
+		this.fileChunks.prepareNextChunk();
+	}
+	public getCurrentChunk(): number {
+		return this.fileChunks.getCurrentChunk()
+	}
+	public getTotalChunks(): number {
+		return this.fileChunks.getTotalChunks()
+	}
+	public setIsUploading(val: boolean) {
+		this.isUploading = val;
+		if (this.fileChunks) {
+			this.fileChunks.setUploading(val)
+		}
+	}
+	public set fileChunks(val: FileChunk) {
+		this._fileChunks = val;
+	}
+	public get fileChunks(): FileChunk {
+		return this._fileChunks;
+	}
+	public getId(): any {
+		return this.id;
+	}
+	public setId(id: any) {
+		this.id = id;
+	}
 	public cancel(): void {
 		this.uploader.cancelItem(this);
 	}
-
 	public remove(): void {
 		this.uploader.removeFromQueue(this);
 	}
-
+	public removeOnline(): void {
+		this.isRemoving = true;
+		this.uploader.uploaderService.deleteEntry(this,{},true).subscribe(
+			(result:any) => {
+				this.isRemoving = false;
+				this.remove();
+			},
+			(error:any) => {
+				this.isRemoving = false;
+			}
+		);
+	}
 	public onBeforeUpload(): void {
 		return void 0;
 	}
-
 	public onBuildForm(form: any): any {
 		return { form };
 	}
-
 	public onProgress(progress: number): any {
 		return { progress };
 	}
-
-  public onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onSuccess(response: string, status: number, headers: HttpHeaders): any {
 		return { response, status, headers };
 	}
-
-  public onError(response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onError(response: string, status: number, headers: HttpHeaders): any {
 		return { response, status, headers };
 	}
-
-  public onCancel(response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onCancel(): any {
+		return {};
+	}
+	public onComplete(response: string, status: number, headers: HttpHeaders): any {
 		return { response, status, headers };
 	}
-
-  public onComplete(response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onCompleteChunk(response: string, status: number, headers: HttpHeaders): any {
 		return { response, status, headers };
 	}
-
 	public _onBeforeUpload(): void {
 		this.isReady = true;
 		this.isUploading = true;
@@ -93,17 +137,14 @@ export class FileItem {
 		this.progress = 0;
 		this.onBeforeUpload();
 	}
-
 	public _onBuildForm(form: any): void {
 		this.onBuildForm(form);
 	}
-
 	public _onProgress(progress: number): void {
 		this.progress = progress;
 		this.onProgress(progress);
 	}
-
-  public _onSuccess(response: string, status: number, headers: ParsedResponseHeaders): void {
+	public _onSuccess(response: string, status: number, headers: HttpHeaders): void {
 		this.isReady = false;
 		this.isUploading = false;
 		this.isUploaded = true;
@@ -114,8 +155,7 @@ export class FileItem {
 		this.index = void 0;
 		this.onSuccess(response, status, headers);
 	}
-
-  public _onError(response: string, status: number, headers: ParsedResponseHeaders): void {
+	public _onError(response: string, status: number, headers: HttpHeaders): void {
 		this.isReady = false;
 		this.isUploading = false;
 		this.isUploaded = true;
@@ -126,8 +166,7 @@ export class FileItem {
 		this.index = void 0;
 		this.onError(response, status, headers);
 	}
-
-  public _onCancel(response: string, status: number, headers: ParsedResponseHeaders): void {
+	public _onCancel(): void {
 		this.isReady = false;
 		this.isUploading = false;
 		this.isUploaded = false;
@@ -136,17 +175,34 @@ export class FileItem {
 		this.isError = false;
 		this.progress = 0;
 		this.index = void 0;
-    this.onCancel(response, status, headers);
+		this.onCancel();
 	}
-
-  public _onComplete(response: string, status: number, headers: ParsedResponseHeaders): void {
+	public _onComplete(response: string, status: number, headers: HttpHeaders): void {
 		this.onComplete(response, status, headers);

 		if (this.uploader.options.removeAfterUpload) {
 			this.remove();
 		}
 	}
-
+	public _onCompleteChunk(response: string, status: number, headers: HttpHeaders): void {
+		this.chunkRetries = 0;
+		this._onCompleteChunkCallNext();
+		this.onCompleteChunk(response, status, headers);
+	}
+	public _onCompleteChunkCallNext(): void {
+		this.uploader.uploaderService.uploadFile(this,this.uploader.options);
+		this.prepareNextChunk()
+	}
+	public _onErrorChunk(response: string, status: number, headers: HttpHeaders): void {
+		if (this.chunkRetries > this.chunkTotalRetries) {
+			this.uploader.onErrorItem(this, response, status, headers);
+			this.uploader.onCompleteItem(this, response, status, headers);
+		} else {
+			this.chunkRetries++;
+			this.fileChunks.retrocedeChunk();
+			this._onCompleteChunkCallNext();
+		}
+	}
 	public _prepareToUploading(): void {
 		this.index = this.index || ++this.uploader._nextIndex;
 		this.isReady = true;
--- a/src/file-upload/file-like-object.class.ts
+++ b/src/file-upload/file-like-object.class.ts
@@ -15,7 +15,7 @@ export class FileLikeObject {
 		let fakePathOrObject = isInput ? fileOrInput.value : fileOrInput;
 		let postfix = typeof fakePathOrObject === 'string' ? 'FakePath' : 'Object';
 		let method = '_createFrom' + postfix;
-    (this as any)[ method ](fakePathOrObject);
+		(this as any)[method](fakePathOrObject);
 	}

 	public _createFromFakePath(path: string): void {
--- a/src/file-upload/file-type.class.ts
+++ b/src/file-upload/file-type.class.ts
@@ -1,4 +1,4 @@
-import { FileLikeObject } from "../ng2-file-upload";
+import { FileLikeObject } from "../ng2-chunk-file-upload";

 export class FileType {
 	/*  MS office  */
@@ -89,7 +89,7 @@ export class FileType {
 	}

 	public static fileTypeDetection(inputFilename: string): string {
-    let types: { [ key: string ]: string } = {
+		let types: { [key: string]: string } = {
 			'jpg': 'image',
 			'jpeg': 'image',
 			'tif': 'image',
@@ -154,11 +154,11 @@ export class FileType {
 		if (chunks.length < 2) {
 			return 'application';
 		}
-    let extension = chunks[ chunks.length - 1 ].toLowerCase();
-    if (types[ extension ] === undefined) {
+		let extension = chunks[chunks.length - 1].toLowerCase();
+		if (types[extension] === undefined) {
 			return 'application';
 		} else {
-      return types[ extension ];
+			return types[extension];
 		}
 	}
 }
--- a/src/file-upload/file-upload.module.ts
+++ b/src/file-upload/file-upload.module.ts
@@ -5,9 +5,9 @@ import { FileDropDirective } from './file-drop.directive';
 import { FileSelectDirective } from './file-select.directive';

@NgModule({
-  imports: [ CommonModule ],
-  declarations: [ FileDropDirective, FileSelectDirective ],
-  exports: [ FileDropDirective, FileSelectDirective ]
+	imports: [CommonModule],
+	declarations: [FileDropDirective, FileSelectDirective],
+	exports: [FileDropDirective, FileSelectDirective]
 })
 export class FileUploadModule {
 }
--- a/src/file-upload/file-uploader.class.ts
+++ b/src/file-upload/file-uploader.class.ts
@@ -1,8 +1,10 @@
+import { Headers } from './file-uploader.class';
 import { EventEmitter } from '@angular/core';
 import { FileLikeObject } from './file-like-object.class';
 import { FileItem } from './file-item.class';
 import { FileType } from './file-type.class';
-
+import { HttpEvent, HttpResponse, HttpHeaders } from '@angular/common/http';
+import { HttpUploadProgressEvent, HttpProgressEvent, HttpSentEvent, HttpErrorResponse } from '@angular/common/http/src/response';
 function isFile(value: any): boolean {
 	return (File && value instanceof File);
 }
@@ -12,7 +14,6 @@ export interface Headers {
 	value: string;
 }

-export type ParsedResponseHeaders = { [ headerFieldName: string ]: string };

 export type FilterFunction = {
 	name: string,
@@ -20,6 +21,7 @@ export type FilterFunction = {
 };

 export interface FileUploaderOptions {
+	uploaderService: any;
 	allowedMimeType?: string[];
 	allowedFileType?: string[];
 	autoUpload?: boolean;
@@ -35,14 +37,14 @@ export interface FileUploaderOptions {
 	disableMultipart?: boolean;
 	itemAlias?: string;
 	authTokenHeader?: string;
-  additionalParameter?: { [ key: string ]: any };
+	additionalParameter?: { [key: string]: any };
 	parametersBeforeFiles?: boolean;
 	formatDataFunction?: Function;
 	formatDataFunctionIsAsync?: boolean;
 }

 export class FileUploader {
-
+	public uploaderService: any;
 	public authToken: string;
 	public isUploading: boolean = false;
 	public queue: FileItem[] = [];
@@ -51,8 +53,9 @@ export class FileUploader {
 	public autoUpload: any;
 	public authTokenHeader: string;
 	public response: EventEmitter<any>;
-
+	public chunkSize: number = null;
 	public options: FileUploaderOptions = {
+		uploaderService: null,
 		autoUpload: false,
 		isHTML5: true,
 		filters: [],
@@ -68,10 +71,10 @@ export class FileUploader {
 		this.setOptions(options);
 		this.response = new EventEmitter<any>();
 	}
-
 	public setOptions(options: FileUploaderOptions): void {
 		this.options = Object.assign(this.options, options);
-
+		this.uploaderService = this.options.uploaderService;
+		this.uploaderService.uploader = this;
 		this.authToken = this.options.authToken;
 		this.authTokenHeader = this.options.authTokenHeader || 'Authorization';
 		this.autoUpload = this.options.autoUpload;
@@ -90,7 +93,7 @@ export class FileUploader {
 		}

 		for (let i = 0; i < this.queue.length; i++) {
-      this.queue[ i ].url = this.options.url;
+			this.queue[i].url = this.options.url;
 		}
 	}

@@ -114,7 +117,7 @@ export class FileUploader {
 				this.queue.push(fileItem);
 				this._onAfterAddingFile(fileItem);
 			} else {
-        let filter = arrayOfFilters[ this._failFilterIndex ];
+				let filter = arrayOfFilters[this._failFilterIndex];
 				this._onWhenAddingFileFailed(temp, filter, options);
 			}
 		});
@@ -130,53 +133,52 @@ export class FileUploader {

 	public removeFromQueue(value: FileItem): void {
 		let index = this.getIndexOfItem(value);
-    let item = this.queue[ index ];
+		let item = this.queue[index];
 		if (item.isUploading) {
 			item.cancel();
 		}
 		this.queue.splice(index, 1);
 		this.progress = this._getTotalProgress();
+		this.onRemoveItem(item);		
 	}

 	public clearQueue(): void {
 		while (this.queue.length) {
-      this.queue[ 0 ].remove();
+			this.queue[0].remove();
 		}
 		this.progress = 0;
 	}

 	public uploadItem(value: FileItem): void {
 		let index = this.getIndexOfItem(value);
-    let item = this.queue[ index ];
-    let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport';
+		let item = this.queue[index];
 		item._prepareToUploading();
 		if (this.isUploading) {
 			return;
 		}
 		this.isUploading = true;
-    (this as any)[ transport ](item);
+		this._uploadFile(item);
 	}

 	public cancelItem(value: FileItem): void {
-    let index = this.getIndexOfItem(value);
-    let item = this.queue[ index ];
-    let prop = this.options.isHTML5 ? item._xhr : item._form;
+		const index = this.getIndexOfItem(value);
+		const item = this.queue[index];
 		if (item && item.isUploading) {
-      prop.abort();
+			this.uploaderService.stopUpload()
 		}
 	}

 	public uploadAll(): void {
-    let items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading);
+		const items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading);
 		if (!items.length) {
 			return;
 		}
 		items.map((item: FileItem) => item._prepareToUploading());
-    items[ 0 ].upload();
+		items[0].upload();
 	}

 	public cancelAll(): void {
-    let items = this.getNotUploadedItems();
+		const items = this.getNotUploadedItems();
 		items.map((item: FileItem) => item.cancel());
 	}

@@ -192,6 +194,23 @@ export class FileUploader {
 		return typeof value === 'number' ? value : this.queue.indexOf(value);
 	}

+	public getIsErrorItems(): any[] {
+		return this.queue.filter((item: FileItem) => item.isError);
+	}
+
+	public getIsCancelItems(): any[] {
+		return this.queue.filter((item: FileItem) => item.isCancel);
+	}
+
+	public getIsSuccessItems(): any[] {
+		return this.queue.filter((item: FileItem) => item.isSuccess);
+	}
+
+	public getAllItems(): any[] {
+		return this.queue;
+	}
+
+
 	public getNotUploadedItems(): any[] {
 		return this.queue.filter((item: FileItem) => !item.isUploaded);
 	}
@@ -234,19 +253,27 @@ export class FileUploader {
 		return { progress };
 	}

-  public onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onSuccessItem(item: FileItem, response: string, status: number, headers: HttpHeaders): any {
 		return { item, response, status, headers };
 	}

-  public onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onErrorItem(item: FileItem, response: string, status: number, headers: HttpHeaders): any {
 		return { item, response, status, headers };
 	}

-  public onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onCancelItem(item: FileItem): any {
+		return { item };
+	}
+	public onRemoveItem(item: FileItem): any {
+		return { item };
+	}
+	public onCompleteChunk(item: FileItem, response: string, status: number, headers: HttpHeaders): any {
 		return { item, response, status, headers };
 	}
-
-  public onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
+	public onErrorChunk(item: FileItem, response: string, status: number, headers: HttpHeaders): any {
+		return { item, response, status, headers };
+	}
+	public onCompleteItem(item: FileItem, response: string, status: number, headers: HttpHeaders): any {
 		return { item, response, status, headers };
 	}

@@ -267,15 +294,20 @@ export class FileUploader {
 			this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1);
 	}

-  public _onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
+	public _onErrorItem(item: FileItem, response: string, status: number, headers: HttpHeaders): void {
 		item._onError(response, status, headers);
 		this.onErrorItem(item, response, status, headers);
 	}
-
-  public _onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
+	public _onCompleteChunk(item: FileItem, response: string, status: number, headers: HttpHeaders): void {
+		this.onCompleteChunk(item, response, status, headers);
+		item._onCompleteChunk(response, status, headers);
+		this.progress = this._getTotalProgress();
+		this._render();
+	}
+	public _onCompleteItem(item: FileItem, response?: string, status?: number, headers?: HttpHeaders): void {
 		item._onComplete(response, status, headers);
 		this.onCompleteItem(item, response, status, headers);
-    let nextItem = this.getReadyItems()[ 0 ];
+		let nextItem = this.getReadyItems()[0];
 		this.isUploading = false;
 		if (nextItem) {
 			nextItem.upload();
@@ -286,104 +318,74 @@ export class FileUploader {
 		this._render();
 	}
 	
-  protected _headersGetter(parsedHeaders: ParsedResponseHeaders): any {
-    return (name: any): any => {
-      if (name) {
-        return parsedHeaders[ name.toLowerCase() ] || void 0;
+	protected _onProgress(event: HttpProgressEvent, item: FileItem) {
+		event = event;
+		let progress = (100 * event.loaded / event.total); 
+		if (this.uploaderService.options.chunkSize > 0) {
+			progress = ( 100 * item.getCurrentChunk() / item.getTotalChunks() ) + (progress / item.getTotalChunks() );
 		}
-      return parsedHeaders;
-    };
+		// TODO: Check why it's not showing upload progress per item only on complete.
+		this._onProgressItem(item, Math.round(progress) );
+	}
+	public onProgress(event: HttpProgressEvent, item: FileItem) {
+		this._onProgress(event, item);
+	}
+	protected _onStart(event: HttpSentEvent, item: FileItem) {
+
+	}
+	public onStart(event: HttpSentEvent, item: FileItem) {
+		this._onStart(event, item);
+	}
+	protected _onLoad(event: HttpResponse<any>, item: FileItem) {
+		const headers = event.headers;
+		const response = this._transformResponse(event.body, headers);
+		const gist = this._isSuccessCode(event.status) ? 'Success' : 'Error';
+		const method = '_on' + gist + 'Item';
+		if (this.uploaderService.options.chunkSize > 0) {
+			if ( (item.getCurrentChunk() +1) >= item.getTotalChunks()) {
+				(this as any)[method](item, response, event.status, headers);
+				this._onCompleteItem(item, response, event.status, headers);
+			} else {
+				this._onCompleteChunk(item, response, event.status, headers);
+			}
+		} else {
+			(this as any)[method](item, response, event.status, headers);
+			this._onCompleteItem(item, response, event.status, headers);
 		}
 		
-  protected _xhrTransport(item: FileItem): any {
-    let that = this;
-    let xhr = item._xhr = new XMLHttpRequest();
-    let sendable: any;
+	}
+	public onLoad(event: HttpResponse<any>, item: FileItem) {
+		this._onLoad(event, item);
+	}
+
+	protected _onError(error: any, item: FileItem) {
+		const headers: HttpHeaders = error.Headers
+		const response = this._transformResponse(error.error, headers);
+		if (this.uploaderService.options.chunkSize > 0) {
+			this._onErrorChunk(item, response, error.status, headers);
+		} else {
+			this._onErrorItem(item, response, error.status, headers);
+			this._onCompleteItem(item, response, error.status, headers);
+		}
+	}
+	public onError(error: HttpErrorResponse, item: FileItem) {
+		this._onError(error,item);
+	}
+	protected _onAbort(error: HttpErrorResponse, item: FileItem) {
+		this._onCancelItem(item);
+		this._onCompleteItem(item);
+	}
+
+	public onAbort(error: HttpErrorResponse, item: FileItem) {
+		this._onAbort(error, item);
+	}
+	
+	protected _uploadFile(item: FileItem): any {
 		this._onBeforeUploadItem(item);
-
 		if (typeof item._file.size !== 'number') {
 			throw new TypeError('The file specified is no longer valid');
 		}
-    if (!this.options.disableMultipart) {
-      sendable = new FormData();
-      this._onBuildItemForm(item, sendable);
-
-      const appendFile = () => sendable.append(item.alias, item._file, item.file.name);
-      if (!this.options.parametersBeforeFiles) {
-        appendFile();
-      }
-
-      // For AWS, Additional Parameters must come BEFORE Files
-      if (this.options.additionalParameter !== undefined) {
-        Object.keys(this.options.additionalParameter).forEach((key: string) => {
-          let paramVal = this.options.additionalParameter[ key ];
-          // Allow an additional parameter to include the filename
-          if (typeof paramVal === 'string' && paramVal.indexOf('{{file_name}}') >= 0) {
-            paramVal = paramVal.replace('{{file_name}}', item.file.name);
-          }
-          sendable.append(key, paramVal);
-        });
-      }
-
-      if (this.options.parametersBeforeFiles) {
-        appendFile();
-      }
-    } else {
-      sendable = this.options.formatDataFunction(item);
-    }
-
-    xhr.upload.onprogress = (event: any) => {
-      let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
-      this._onProgressItem(item, progress);
-    };
-    xhr.onload = () => {
-      let headers = this._parseHeaders(xhr.getAllResponseHeaders());
-      let response = this._transformResponse(xhr.response, headers);
-      let gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error';
-      let method = '_on' + gist + 'Item';
-      (this as any)[ method ](item, response, xhr.status, headers);
-      this._onCompleteItem(item, response, xhr.status, headers);
-    };
-    xhr.onerror = () => {
-      let headers = this._parseHeaders(xhr.getAllResponseHeaders());
-      let response = this._transformResponse(xhr.response, headers);
-      this._onErrorItem(item, response, xhr.status, headers);
-      this._onCompleteItem(item, response, xhr.status, headers);
-    };
-    xhr.onabort = () => {
-      let headers = this._parseHeaders(xhr.getAllResponseHeaders());
-      let response = this._transformResponse(xhr.response, headers);
-      this._onCancelItem(item, response, xhr.status, headers);
-      this._onCompleteItem(item, response, xhr.status, headers);
-    };
-    xhr.open(item.method, item.url, true);
-    xhr.withCredentials = item.withCredentials;
-    if (this.options.headers) {
-      for (let header of this.options.headers) {
-        xhr.setRequestHeader(header.name, header.value);
-      }
-    }
-    if (item.headers.length) {
-      for (let header of item.headers) {
-        xhr.setRequestHeader(header.name, header.value);
-      }
-    }
-    if (this.authToken) {
-      xhr.setRequestHeader(this.authTokenHeader, this.authToken);
-    }
-    xhr.onreadystatechange = function () {
-      if (xhr.readyState == XMLHttpRequest.DONE) {
-        that.response.emit(xhr.responseText)
-      }
-    }
-    if (this.options.formatDataFunctionIsAsync) {
-      sendable.then(
-        (result: any) => xhr.send(JSON.stringify(result))
-      );
-    } else {
-      xhr.send(sendable);
-    }
-    this._render();
+		this.uploaderService.uploadFile(item, this.options);
 	}
 	
 	protected _getTotalProgress(value: number = 0): number {
@@ -432,29 +434,10 @@ export class FileUploader {
 		return (status >= 200 && status < 300) || status === 304;
 	}

-  protected _transformResponse(response: string, headers: ParsedResponseHeaders): string {
+	protected _transformResponse(response: string, headers: HttpHeaders): string {
 		return response;
 	}

-  protected _parseHeaders(headers: string): ParsedResponseHeaders {
-    let parsed: any = {};
-    let key: any;
-    let val: any;
-    let i: any;
-    if (!headers) {
-      return parsed;
-    }
-    headers.split('\n').map((line: any) => {
-      i = line.indexOf(':');
-      key = line.slice(0, i).trim().toLowerCase();
-      val = line.slice(i + 1).trim();
-      if (key) {
-        parsed[ key ] = parsed[ key ] ? parsed[ key ] + ', ' + val : val;
-      }
-    });
-    return parsed;
-  }
-
 	protected _onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): void {
 		this.onWhenAddingFileFailed(item, filter, options);
 	}
@@ -472,27 +455,30 @@ export class FileUploader {
 		this.onBeforeUploadItem(item);
 	}

-  protected _onBuildItemForm(item: FileItem, form: any): void {
+	public _onBuildItemForm(item: FileItem, form: any): void {
 		item._onBuildForm(form);
 		this.onBuildItemForm(item, form);
 	}

 	protected _onProgressItem(item: FileItem, progress: any): void {
-    let total = this._getTotalProgress(progress);
+		const total = this._getTotalProgress(progress);
 		this.progress = total;
 		item._onProgress(progress);
 		this.onProgressItem(item, progress);
 		this.onProgressAll(total);
 		this._render();
 	}
-
-  protected _onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
+	protected _onErrorChunk(item: FileItem, response: string, status: number, headers: HttpHeaders): void {
+		item._onErrorChunk(response, status, headers);
+		this.onErrorChunk(item, response, status, headers)
+	}
+	protected _onSuccessItem(item: FileItem, response: string, status: number, headers: HttpHeaders): void {
 		item._onSuccess(response, status, headers);
 		this.onSuccessItem(item, response, status, headers);
 	}

-  protected _onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
-    item._onCancel(response, status, headers);
-    this.onCancelItem(item, response, status, headers);
+	protected _onCancelItem(item: FileItem): void {
+		item._onCancel();
+		this.onCancelItem(item);
 	}
 }
--- a/src/file-upload/file-uploader.service.ts
+++ b/src/file-upload/file-uploader.service.ts
@@ -0,0 +1,358 @@
+import { HttpErrorResponse } from '@angular/common/http/src/response';
+import { FileUploaderOptions, FileUploader } from './file-uploader.class';
+import { FileItem } from './file-item.class';
+
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpRequest, HttpEventType } from '@angular/common/http';
+import { Observable, of} from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export interface UploaderLinksOptions {
+	downloadEntry: string;
+	updateEntry: string;
+	createEntry: string;
+	deleteEntry: string;
+}
+
+export interface UploaderServiceOptions {
+	createMethod: string;
+	updateMethod: string;
+	authorizationHeaderName?: string;
+	tokenPattern?: string;
+	token?: string;
+	chunkSize?: number;
+	totalChunkParamName?: string;
+	currentChunkParamName?: string;
+	fileParamName?: string;
+	idAttribute?: string;
+}
+@Injectable()
+export class FileUploaderService {
+	public defaultLinks: UploaderLinksOptions = {
+		downloadEntry: '',
+		updateEntry: '',
+		createEntry: '',
+		deleteEntry: ''
+	};
+	public defaultOptions: UploaderServiceOptions = {
+		createMethod: 'POST',
+		updateMethod: 'POST',
+		authorizationHeaderName: 'Authorization',
+		tokenPattern: null,
+		token: null,
+		chunkSize: 0,
+		totalChunkParamName: 'total_chunks',
+		currentChunkParamName: 'current_chunk',
+		fileParamName: 'file',
+		idAttribute: 'id'
+	};
+	public additionalHeaders:any = {};
+	protected cancelError = 'UPLOAD CANCELED';
+	protected uploadSubscription: any = null;
+	public links: UploaderLinksOptions;
+	public options: UploaderServiceOptions;
+	private _uploader: FileUploader = null;
+	constructor(protected http: HttpClient) {
+		this.links = Object.assign({}, this.defaultLinks, this.links);
+		this.options = Object.assign({}, this.defaultOptions, this.options);
+	}
+	get uploader(): FileUploader {
+		return this._uploader;
+	}
+	set uploader(theUploader: FileUploader) {
+		this._uploader = theUploader;
+	}
+	public onBeforeUpload(
+		item: FileItem,
+		options: FileUploaderOptions
+	): Promise<any> {
+		const promise = new Promise((resolve, reject) => {
+			resolve(true);
+		});
+		return promise;
+	}
+	public uploadFile(item: FileItem, options: FileUploaderOptions): void {
+		this.onBeforeUpload(item, options).then(() => {
+			this._uploadFile(item, options);
+		});
+	}
+	public onBeforeGetDefaultHeaders(): Promise<any> {
+		const promise = new Promise((resolve, reject) => {
+			resolve(true);
+		});
+		return promise;
+	}
+	protected _getDefaultHeaders(): Promise<any> {
+		return new Promise((resolve, reject) => {
+			this.onBeforeGetDefaultHeaders().then(
+				result => {
+					const h: any = {};
+					if (this.options.tokenPattern && this.options.token) {
+						h[
+							this.options.authorizationHeaderName
+						] = this.options.tokenPattern.replace(
+							'#token#',
+							this.options.token
+						);
+					}
+					for (const key in this.additionalHeaders) {
+						if (this.additionalHeaders.hasOwnProperty(key)) {
+							h[key] = this.additionalHeaders[key];
+						}
+					}
+					resolve(h);
+				},
+				error => {
+					reject(error);
+				}
+			);
+		});
+	}
+	protected _getRequestHeaders(
+		item: FileItem,
+		options: FileUploaderOptions
+	): Promise<any> {
+		return new Promise((resolve, reject) => {
+			this._getDefaultHeaders().then(
+				h => {
+					if (options.headers) {
+						for (let header of options.headers) {
+							h[header.name] = header.value;
+						}
+					}
+					if (item.headers.length) {
+						for (let header of item.headers) {
+							h[header.name] = header.value;
+						}
+					}
+					resolve(h);
+				},
+				error => {
+					reject(error);
+				}
+			);
+		});
+	}
+
+	public buildPackageToSend(item: FileItem, options: FileUploaderOptions) {
+		let sendable: FormData = new FormData();
+		this.uploader._onBuildItemForm(item, sendable);
+		let file: any = null;
+		if (this.options.chunkSize > 0) {
+			file = item.getCurrentChunkFile();
+		} else {
+			file = item._file;
+		}
+		const appendFile = () =>
+			sendable.append(this.options.fileParamName, file, item.file.name);
+		if (!options.parametersBeforeFiles) {
+			appendFile();
+		}
+
+		// For AWS, Additional Parameters must come BEFORE Files
+		if (options.additionalParameter !== undefined) {
+			Object.keys(options.additionalParameter).forEach((key: string) => {
+				let paramVal = options.additionalParameter[key];
+				// Allow an additional parameter to include the filename
+				if (
+					typeof paramVal === 'string' &&
+					paramVal.indexOf('{{file_name}}') >= 0
+				) {
+					paramVal = paramVal.replace('{{file_name}}', item.file.name);
+				}
+				sendable.append(key, paramVal);
+			});
+		}
+
+		if (this.options.chunkSize > 0 && this.options.totalChunkParamName) {
+			sendable.append(
+				this.options.totalChunkParamName,
+				item.getTotalChunks().toString()
+			);
+		}
+		if (this.options.chunkSize > 0 && this.options.currentChunkParamName) {
+			sendable.append(
+				this.options.currentChunkParamName,
+				(item.getCurrentChunk() + 1).toString()
+			);
+		}
+
+		if (options.parametersBeforeFiles) {
+			appendFile();
+		}
+
+		return sendable;
+	}
+
+	protected _uploadFile(item: FileItem, options: FileUploaderOptions): void {
+		this._getRequestHeaders(item, options).then(
+			headers => {
+				let request_method = this.options.createMethod;
+				let link = this.links.createEntry;
+				item.setIsUploading(true);
+				if (this.options.chunkSize > 0) {
+					try {
+						item.getCurrentChunk();
+					} catch (err) {
+						item.createFileChunk(this.options.chunkSize);
+					}
+					request_method =
+						item.getCurrentChunk() > 0
+							? this.options.updateMethod
+							: this.options.createMethod;
+					link =
+						item.getCurrentChunk() > 0
+							? this.links.updateEntry
+							: this.links.createEntry;
+				}
+				if (item.getId()) {
+					link = link.replace('#id#', item.getId());
+				}
+				const data = this.buildPackageToSend(item, options);
+				const request = new HttpRequest(request_method, link, data, {
+					headers: new HttpHeaders(headers),
+					reportProgress: true,
+					withCredentials: item.withCredentials,
+				});
+				this.uploadSubscription = this.http.request(request).subscribe(
+					(event: any) => {
+						this.getEventMessage(event, item);
+					},
+					(error: any) => {
+						if (this.cancelError === error) {
+							this.uploader.onAbort(error, item);
+						} else {
+							this.uploader.onError(error, item);
+						}
+					}
+				);
+			},
+			error => {}
+		);
+	}
+	public stopUpload() {
+		if (this.uploadSubscription && this.uploadSubscription.unsubscribe) {
+			this.uploadSubscription.error(this.cancelError);
+		}
+	}
+	private getEventMessage(event: any, item: FileItem) {
+		switch (event.type) {
+			case HttpEventType.ResponseHeader:
+				break;
+			case HttpEventType.Sent:
+				this.uploader.onStart(event, item);
+				break;
+			case HttpEventType.UploadProgress:
+				this.uploader.onProgress(event, item);
+				break;
+			case HttpEventType.Response:
+				if (this.options.chunkSize > 0) {
+					if (item.getCurrentChunk() === 0) {
+						const response = event.body;
+						if (response[this.options.idAttribute]) {
+							item.setId(response[this.options.idAttribute]);
+						}
+					}
+				}
+				this.uploader.onLoad(event, item);
+				break;
+			default:
+				break;
+		}
+	}
+	private handleError(item: FileItem) {
+		const userMessage = `${item.file.name} upload failed.`;
+
+		return (error: HttpErrorResponse) => {
+			this.uploader.onError(error, item);
+
+			const message =
+				error.error instanceof Error
+					? error.error.message
+					: `server returned code ${error.status} with body "${error.error}"`;
+
+			return of (userMessage);
+		};
+	}
+
+	public deleteEntry(
+		item: FileItem,
+		options = {},
+		skipConfirmation = false
+	): Observable <any> {
+		if (item.getId() && this.links['deleteEntry']) {
+			let link = this.links['deleteEntry'].replace(/#id#/g, item.getId());
+			let confirmation = false;
+			if (skipConfirmation) {
+				confirmation = true;
+			} else {
+				confirmation = confirm('Are you sure you want to delete this entry?');
+			}
+
+			if (confirmation) {
+				return this.delete(link, options)
+			} else {
+				return of(false);
+			}
+		} else {
+			return of(false);
+		}
+	}
+
+	protected delete(url: string, options = {}): Observable<any> {
+		return new Observable((observe:any) => {
+			this._getDefaultHeaders().then(
+				function(headers: any) {
+					return this.http
+						.delete(url, { headers: new HttpHeaders(headers) })
+						.subscribe(
+							(response: Response) => {
+								observe.next(response);
+							},
+							(error: any) => {
+								observe.error(error);
+							}
+						);
+				}.bind(this),
+				error => {
+					observe.error(error);
+				}
+			);
+		});
+	}
+
+	/*
+		HTTP General methos only bellow
+	*/
+	protected get(url: string): Observable<any> {
+		return new Observable(observe => {
+			this._getDefaultHeaders().then(
+				function(headers:any) {
+					return this.http
+						.get(url, { headers: new HttpHeaders(headers) })
+						.subscribe(
+							(response: Response) => {
+								observe.next(response);
+							},
+							(error: any) => {
+								observe.error(error);
+							}
+						);
+				}.bind(this),
+				error => {
+					observe.error(error);
+				}
+			);
+		});
+	}
+
+	public addHeader(name:string = null, value:any = null) {
+		this.additionalHeaders[name] = value;
+	}
+
+	public removeHeader(name:string = null) {
+		if (this.additionalHeaders.hasOwnProperty(name)) {
+			delete this.additionalHeaders[name];
+		}
+	}
+}
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,5 +3,6 @@ export * from  './file-upload/file-drop.directive';
 export * from  './file-upload/file-uploader.class';
 export * from './file-upload/file-item.class';
 export * from './file-upload/file-like-object.class';
+export * from './file-upload/file-uploader.service';

 export { FileUploadModule } from './file-upload/file-upload.module';
--- a/src/ng2-chunk-file-upload.ts
+++ b/src/ng2-chunk-file-upload.ts
--- a/src/package.json
+++ b/src/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ng2-file-upload",
+  "name": "ng2-chunk-file-upload",
  "version": "1.3.0",
  "peerDependencies": {
    "@angular/common": "*",
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -28,7 +28,7 @@
  ],
  "files": [
    "../scripts/typings.d.ts",
-    "./ng2-file-upload.ts",
+    "./ng2-chunk-file-upload.ts",
    "./index.ts"
  ],
  "angularCompilerOptions": {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+	"compileOnSave": false,
+	"compilerOptions": {
+		"outDir": "./dist/out-tsc",
+		"sourceMap": true,
+		"declaration": false,
+		"moduleResolution": "node",
+		"emitDecoratorMetadata": true,
+		"experimentalDecorators": true,
+		"target": "es5",
+		"typeRoots": [
+			"node_modules/@types"
+		],
+		"lib": [
+			"es2017",
+			"dom"
+		],
+		"plugins": [
+			{
+				"name": "tslint-language-service"
+			}
+		]
+	}
+}
--- a/tslint.json
+++ b/tslint.json
@@ -1,12 +1,136 @@
 {
-  "extends": "tslint-config-valorsoft",
-  "rulesDirectory": "./node_modules/codelyzer",
+	"rulesDirectory": [
+		"node_modules/codelyzer"
+	],
 	"rules": {
-    "no-forward-ref": false,
-    "no-null-keyword": false,
-    "only-arrow-functions": false,
-    "no-access-missing-member": false,
-    "directive-selector": false,
-    "component-selector": false
+		"trailing-comma": [
+			true,
+			{
+				"multiline": "always",
+				"singleline": "never"
+			}
+		],
+		"arrow-return-shorthand": true,
+		"callable-types": true,
+		"class-name": true,
+		"comment-format": [
+			true,
+			"check-space"
+		],
+		"eofline": true,
+		"forin": true,
+		"import-blacklist": [
+			true
+		],
+		"import-spacing": true,
+		"indent": [
+			true,
+			"tabs",
+			4
+		],
+		"interface-over-type-literal": true,
+		"label-position": true,
+		"max-line-length": [
+			true,
+			180
+		],
+		"member-access": false,
+		"no-arg": true,
+		"no-console": [
+			true,
+			"debug",
+			"log",
+			"time",
+			"timeEnd",
+			"trace"
+		],
+		"no-construct": true,
+		"no-debugger": true,
+		"no-duplicate-super": true,
+		"no-empty": false,
+		"no-empty-interface": true,
+		"no-eval": true,
+		"no-misused-new": true,
+		"no-non-null-assertion": true,
+		"no-shadowed-variable": true,
+		"no-string-literal": false,
+		"no-string-throw": true,
+		"no-switch-case-fall-through": true,
+		"no-trailing-whitespace": true,
+		"no-unnecessary-initializer": true,
+		"no-use-before-declare": true,
+		"no-var-keyword": true,
+		"object-literal-sort-keys": false,
+		"one-line": [
+			true,
+			"check-open-brace",
+			"check-catch",
+			"check-else",
+			"check-whitespace"
+		],
+		"prefer-const": true,
+		"quotemark": [
+			true,
+			"single"
+		],
+		"radix": true,
+		"semicolon": [
+			true
+		],
+		"triple-equals": [
+			true,
+			"allow-null-check"
+		],
+		"typedef-whitespace": [
+			true,
+			{
+				"call-signature": "nospace",
+				"index-signature": "nospace",
+				"parameter": "nospace",
+				"property-declaration": "nospace",
+				"variable-declaration": "nospace"
+			}
+		],
+		"typeof-compare": true,
+		"unified-signatures": true,
+		"variable-name": false,
+		"whitespace": [
+			true,
+			"check-branch",
+			"check-decl",
+			"check-operator",
+			"check-separator",
+			"check-type"
+		],
+		"directive-selector": [
+			true,
+			"attribute",
+			"ngx",
+			"camelCase"
+		],
+		"component-selector": [
+			true,
+			"element",
+			"ngx",
+			"kebab-case"
+		],
+		"ban": [
+			true,
+			"eval",
+			"fit",
+			"fdescribe",
+			{
+				"name": "$",
+				"message": "please don't"
+			}
+		],
+		"use-input-property-decorator": true,
+		"use-output-property-decorator": true,
+		"no-output-rename": true,
+		"use-life-cycle-interface": true,
+		"use-pipe-transform-interface": true,
+		"component-class-suffix": true,
+		"directive-class-suffix": true,
+		"no-unused-variable": true
 	}
 }
Author	SHA1	Message	Date
Paulo	45e1812d0d	Updating Angular Version to 6	2018-05-23 16:23:19 -03:00
Paulo	04eef8895e	Updating Naming and Files to Work With Services	2018-05-23 12:35:49 -03:00
Paulo	8ae876445e	Improving ReadME	2018-03-09 10:22:26 -03:00
Paulo	5a84b9eb0c	Fixing Issues with file upload and adding more Helper classes!	2018-03-09 10:07:00 -03:00
Paulo	6c76a590eb	Improving the Chunk Method	2018-02-23 13:03:05 -03:00
Paulo	4ead005a66	Fixing README	2018-02-09 22:48:17 -02:00
Paulo	9e8aec3e4a	Adding Support For Chunk File Upload Changes to implement chunk file upload, more information on the README	2018-02-09 22:45:20 -02:00