Compare commits

..

1 Commits

Author SHA1 Message Date
Rahil Shaikh
3d8de07cdc doc (readme): added link to tuotrial 2019-06-10 13:40:02 +05:30
31 changed files with 1134 additions and 20157 deletions

57
.angular-cli.json Normal file
View File

@@ -0,0 +1,57 @@
{
"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
}
}
}

11
.editorconfig Normal file
View File

@@ -0,0 +1,11 @@
# 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

View File

@@ -1,108 +1,108 @@
<a name="1.3.0"></a> <a name="1.3.0"></a>
# [1.3.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.2.0...v1.3.0) (2017-11-25) # [1.3.0](https://github.com/valor-software/ng2-file-upload/compare/v1.2.0...v1.3.0) (2017-11-25)
### Features ### Features
* **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 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-chunk-file-upload/pull/911)) * **file-upload** add file type .zip ([#911](https://github.com/valor-software/ng2-file-upload/pull/911))
### Bug Fixes ### Bug Fixes
* **file-uploader** Update: setOptions ([#904](https://github.com/valor-software/ng2-chunk-file-upload/pull/904)) * **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-chunk-file-upload/pull/844)) * **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-chunk-file-upload/pull/857)) * **docs** Added onFileDrop() event to documentation ([#857](https://github.com/valor-software/ng2-file-upload/pull/857))
<a name="1.2.1"></a> <a name="1.2.1"></a>
## [1.2.1](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.2.0...v1.2.1) (2017-04-10) ## [1.2.1](https://github.com/valor-software/ng2-file-upload/compare/v1.2.0...v1.2.1) (2017-04-10)
### Features ### Features
* **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)) * **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))
<a name="1.2.0"></a> <a name="1.2.0"></a>
# [1.2.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.3-0...v1.2.0) (2017-01-17) # [1.2.0](https://github.com/valor-software/ng2-file-upload/compare/v1.1.3-0...v1.2.0) (2017-01-17)
### Bug Fixes ### Bug Fixes
* **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) * **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)
### Features ### Features
* **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)) * **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-chunk-file-upload/issues/565)) ([397de09](https://github.com/valor-software/ng2-chunk-file-upload/commit/397de09)) * **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-chunk-file-upload/issues/574)) ([3cc6a99](https://github.com/valor-software/ng2-chunk-file-upload/commit/3cc6a99)) * **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))
<a name="1.1.3-0"></a> <a name="1.1.3-0"></a>
## [1.1.3-0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.2...v1.1.3-0) (2016-10-19) ## [1.1.3-0](https://github.com/valor-software/ng2-file-upload/compare/v1.1.2...v1.1.3-0) (2016-10-19)
### Bug Fixes ### Bug Fixes
* **typing:** added authTokenHeader property to options and file upload class ([b55c852](https://github.com/valor-software/ng2-chunk-file-upload/commit/b55c852)) * **typing:** added authTokenHeader property to options and file upload class ([b55c852](https://github.com/valor-software/ng2-file-upload/commit/b55c852))
### Features ### Features
* **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) * **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-chunk-file-upload/issues/213)) ([282295c](https://github.com/valor-software/ng2-chunk-file-upload/commit/282295c)) * **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))
<a name="1.1.2"></a> <a name="1.1.2"></a>
## [1.1.2](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.1...v1.1.2) (2016-10-17) ## [1.1.2](https://github.com/valor-software/ng2-file-upload/compare/v1.1.1...v1.1.2) (2016-10-17)
### Features ### Features
* **package:** allow of ng2 v2.0.* and v2.*.* ([87395e6](https://github.com/valor-software/ng2-chunk-file-upload/commit/87395e6)) * **package:** allow of ng2 v2.0.* and v2.*.* ([87395e6](https://github.com/valor-software/ng2-file-upload/commit/87395e6))
<a name="1.1.1"></a> <a name="1.1.1"></a>
## [1.1.1](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.3...v1.1.1) (2016-10-17) ## [1.1.1](https://github.com/valor-software/ng2-file-upload/compare/v1.0.3...v1.1.1) (2016-10-17)
### Bug Fixes ### Bug Fixes
* **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)) * **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-chunk-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-chunk-file-upload/commit/db77e89)) * **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))
### Features ### Features
* **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)) * **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-chunk-file-upload/issues/425)) ([3fec385](https://github.com/valor-software/ng2-chunk-file-upload/commit/3fec385)) * **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-chunk-file-upload/commit/4fef496)) * **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496))
<a name="1.1.0"></a> <a name="1.1.0"></a>
# [1.1.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.3...v1.1.0) (2016-09-21) # [1.1.0](https://github.com/valor-software/ng2-file-upload/compare/v1.0.3...v1.1.0) (2016-09-21)
### Bug Fixes ### Bug Fixes
* **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)) * **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-chunk-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-chunk-file-upload/commit/db77e89)) * **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))
### Features ### Features
* **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)) * **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-chunk-file-upload/commit/4fef496)) * **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496))
<a name="1.0.3"></a> <a name="1.0.3"></a>
## [1.0.3](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.2...v1.0.3) (2016-05-12) ## [1.0.3](https://github.com/valor-software/ng2-file-upload/compare/v1.0.2...v1.0.3) (2016-05-12)
@@ -112,17 +112,17 @@
### Bug Fixes ### Bug Fixes
* **upload:** merge fix and get filters fix ([ef6091c](https://github.com/valor-software/ng2-chunk-file-upload/commit/ef6091c)) * **upload:** merge fix and get filters fix ([ef6091c](https://github.com/valor-software/ng2-file-upload/commit/ef6091c))
### Chores ### Chores
* **build:** ng2 style guide applied ([aee69d8](https://github.com/valor-software/ng2-chunk-file-upload/commit/aee69d8)) * **build:** ng2 style guide applied ([aee69d8](https://github.com/valor-software/ng2-file-upload/commit/aee69d8))
### Features ### Features
* **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) * **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)
### BREAKING CHANGES ### BREAKING CHANGES

105
README.md
View File

@@ -1,31 +1,31 @@
# 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) # 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-chunk-file-upload/)) Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/))
[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide) [![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-chunk-file-upload.svg?branch=development)](https://travis-ci.org/valor-software/ng2-chunk-file-upload) [![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-chunk-file-upload.svg)](https://david-dm.org/valor-software/ng2-chunk-file-upload) [![Dependency Status](https://david-dm.org/valor-software/ng2-file-upload.svg)](https://david-dm.org/valor-software/ng2-file-upload)
## Quick start ## Quick start
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: 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:
`npm i ng2-chunk-file-upload --save` `npm i ng2-file-upload --save`
Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-chunk-file-upload/archive/master.zip). Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-file-upload/archive/master.zip).
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 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
`ng2-file-drop` is used for area that will be used for dropping of file or files. `ng2-file-drop` is used for area that will be used for dropping of file or files.
3. More information regarding using of ***ng2-chunk-file-upload*** is located in 3. More information regarding using of ***ng2-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). [demo](http://valor-software.github.io/ng2-file-upload/) and [demo sources](https://github.com/valor-software/ng2-file-upload/tree/master/demo).
## Using ***ng2-chunk-file-upload*** in a project ## Using ***ng2-file-upload*** in a project
1. Install as shown in the above section. 1. Install as shown in the above section.
2. Import `FileUploadModule` into the module that declares the component using ***ng2-chunk-file-upload***: 2. Import `FileUploadModule` into the module that declares the component using ***ng2-file-upload***:
```import { FileUploadModule } from 'ng2-chunk-file-upload';``` ```import { FileUploadModule } from 'ng2-file-upload';```
3. Add it to `[imports]` under `@NgModule`: 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: 4. Import `FileUploader` into the component:
```import { FileUploader } from 'ng2-chunk-file-upload';``` ```import { FileUploader } from 'ng2-file-upload';```
5. Create a variable for the API url: 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 ### Properties
- `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) - `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)
### Events ### Events
- `onFileSelected` - fires when files are selected and added to the uploader queue - `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 ### Properties
- `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) - `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)
Parameters supported by this object: Parameters supported by this object:
@@ -67,89 +67,28 @@ 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. 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. 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. 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 ### 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. - `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-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and 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-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.html) [html demo](https://github.com/valor-software/ng2-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)"` - `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 # Troubleshooting
Please follow this guidelines when reporting bugs and feature requests: Please follow this guidelines when reporting bugs and feature requests:
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) 1. Use [GitHub Issues](https://github.com/valor-software/ng2-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. 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! Thanks for understanding!
## Using/Sending Chunk Files Feature # Tutorial with backend implmentation
If you want to send the files chunked you can just set the chunk paramets on the uploader object - [Complete example with backend implementation in Node.js](https://ciphertrick.com/file-upload-angular-nodejs/).
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 ### License
The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/LICENSE) file for the full text) The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-file-upload/blob/master/LICENSE) file for the full text)

View File

@@ -1,114 +0,0 @@
{
"$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": ""
}
}
}

View File

@@ -3,49 +3,41 @@ import { Component } from '@angular/core';
let gettingStarted = require('html-loader!markdown-loader!../getting-started.md'); let gettingStarted = require('html-loader!markdown-loader!../getting-started.md');
@Component({ @Component({
selector: 'app', selector: 'app',
template: ` template: `
<main class="bd-pageheader"> <main class="bd-pageheader">
<div class="container"> <div class="container">
<h1>ng2-chunk-file-upload</h1> <h1>ng2-file-upload</h1>
<p>The Angular2 File Upload directives</p> <p>The Angular2 File Upload directives</p>
<a class="btn btn-primary" href="https://github.com/valor-software/ng2-chunk-file-upload">View on GitHub</a> <a class="btn btn-primary" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
<div class="row"> <div class="row">
<div class="col-lg-1"> <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>
<iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-chunk-file-upload&type=star&count=true" <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>
frameborder="0" scrolling="0" width="170px" height="20px"></iframe> </div>
</div> </div>
<div class="col-lg-1"> </main>
<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>
<div class="container"> <div class="container">
<section id="getting-started" [innerHtml]="gettingStarted"></section> <section id="getting-started" [innerHtml]="gettingStarted"></section>
<file-upload-section class="col-md-12"></file-upload-section> <file-upload-section class="col-md-12"></file-upload-section>
</div> </div>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p class="text-muted text-center"> <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>
<a href="https://github.com/valor-software/ng2-chunk-file-upload">ng2-chunk-file-upload</a> </div>
is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p> </footer>
</div> `
</footer>
`,
}) })
export class AppComponent { export class AppComponent {
public gettingStarted: string = gettingStarted; public gettingStarted:string = gettingStarted;
public ngAfterContentInit(): any { public ngAfterContentInit(): any {
setTimeout(() => { setTimeout(()=>{
if (typeof PR !== 'undefined') { if (typeof PR !== 'undefined') {
// google code-prettify // google code-prettify
PR.prettyPrint(); PR.prettyPrint();
} }
}, 150); }, 150);
} }
} }

View File

@@ -4,24 +4,16 @@ import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { TabsModule } from 'ngx-bootstrap/tabs'; import { TabsModule } from 'ngx-bootstrap/tabs';
import { FileUploadModule } from '../../../src/file-upload/file-upload.module'; import { FileUploadModule } from 'ng2-file-upload';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { FileUploadSectionComponent } from './components/file-upload-section'; import { FileUploadSectionComponent } from './components/file-upload-section';
import { SimpleDemoComponent } from './components/file-upload/simple-demo'; import { SimpleDemoComponent } from './components/file-upload/simple-demo';
import { HttpModule } from '@angular/http';
@NgModule({ @NgModule({
imports: [ imports: [BrowserModule, CommonModule, FileUploadModule, TabsModule.forRoot(), FormsModule],
HttpModule, declarations: [AppComponent, FileUploadSectionComponent, SimpleDemoComponent],
BrowserModule, bootstrap: [AppComponent]
CommonModule,
FileUploadModule,
TabsModule.forRoot(),
FormsModule,
],
declarations: [AppComponent, FileUploadSectionComponent, SimpleDemoComponent],
bootstrap: [AppComponent],
}) })
export class AppModule {} export class AppModule {
}

View File

@@ -2,28 +2,28 @@ import { Component } from '@angular/core';
let doc = require('html-loader!markdown-loader!../../doc.md'); let doc = require('html-loader!markdown-loader!../../doc.md');
let tabDesc: Array<any> = [ let tabDesc:Array<any> = [
{ {
heading: 'Simple', heading: 'Simple',
ts: require('!!raw-loader?lang=typescript!./file-upload/simple-demo.ts'), ts: require('!!raw-loader?lang=typescript!./file-upload/simple-demo.ts'),
html: require('!!raw-loader?lang=markup!./file-upload/simple-demo.html'), html: require('!!raw-loader?lang=markup!./file-upload/simple-demo.html'),
js: require('!!raw-loader?lang=javascript!./file-upload/file-catcher.js') js: require('!!raw-loader?lang=javascript!./file-upload/file-catcher.js')
} }
]; ];
@Component({ @Component({
selector: 'file-upload-section', selector: 'file-upload-section',
templateUrl: './file-upload-section.html' templateUrl: './file-upload-section.html'
}) })
export class FileUploadSectionComponent { export class FileUploadSectionComponent {
public name: string = 'File Upload'; public name:string = 'File Upload';
public currentHeading: string = 'Simple'; public currentHeading:string = 'Simple';
public doc: string = doc; public doc:string = doc;
public tabs: any = tabDesc; public tabs:any = tabDesc;
public select(e: any): void { public select(e:any):void {
if (e.heading) { if (e.heading) {
this.currentHeading = e.heading; this.currentHeading = e.heading;
} }
} }
} }

View File

@@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FileUploader } from 'ng2-chunk-file-upload'; import { FileUploader } from 'ng2-file-upload';
// const URL = '/api/'; // const URL = '/api/';
const URL = 'https://evening-anchorage-3159.herokuapp.com/api/'; const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

View File

@@ -1,6 +1,6 @@
### Usage ### Usage
```typescript ```typescript
import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-chunk-file-upload/ng2-chunk-file-upload'; import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
``` ```
### Annotations ### Annotations
@@ -18,7 +18,7 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-chunk-
### Properties ### Properties
- `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) - `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)
Parameters supported by this object: Parameters supported by this object:
@@ -37,11 +37,11 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-chunk-
### Properties ### Properties
- `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) - `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)
### Events ### 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. - `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-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and 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-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.html) [html demo](https://github.com/valor-software/ng2-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)"` - `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)"`

View File

@@ -6,5 +6,5 @@
Install the components Install the components
``` ```
npm install ng2-chunk-file-upload --save npm install ng2-file-upload --save
``` ```

View File

@@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:;base64,iVBORw0KGgo="> <link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="author" href="https://github.com/valor-software/ng2-chunk-file-upload/graphs/contributors"> <link rel="author" href="https://github.com/valor-software/ng2-file-upload/graphs/contributors">
<!--link to bootstrap.css--> <!--link to bootstrap.css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

View File

@@ -1,17 +1,22 @@
{ {
"compilerOptions": { "compilerOptions": {
"declaration": false, "declaration": false,
"emitDecoratorMetadata": true, "emitDecoratorMetadata": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"noEmitHelpers": false, "noEmitHelpers": false,
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"types": ["jasmine", "webpack"], "types": [
"mapRoot": "./", "jasmine",
"module": "es6", "webpack"
"moduleResolution": "node", ],
"outDir": "../temp/out-tsc", "mapRoot": "./",
"sourceMap": true, "module": "es6",
"target": "es5", "moduleResolution": "node",
"typeRoots": ["../node_modules/@types"] "outDir": "../temp/out-tsc",
} "sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
} }

View File

@@ -6,21 +6,21 @@ const customLaunchers = require('./scripts/sauce-browsers').customLaunchers;
module.exports = function (config) { module.exports = function (config) {
const configuration = { const configuration = {
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ['jasmine', '@angular/cli'],
plugins: [ plugins: [
require('karma-jasmine'), require('karma-jasmine'),
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma') require('@angular/cli/plugins/karma')
], ],
files: [ files: [
{pattern: './scripts/test.ts', watched: false} {pattern: './scripts/test.ts', watched: false}
], ],
preprocessors: { preprocessors: {
'./scripts/test.ts': ['@angular-devkit/build-angular'] './scripts/test.ts': ['@angular/cli']
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: false fixWebpackSourcePaths: false
}, },
angularCli: { angularCli: {

18100
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,8 +1,8 @@
{ {
"name": "ng2-chunk-file-upload-base", "name": "ng2-file-upload-base",
"version": "1.3.0", "version": "1.3.0",
"private": true, "private": true,
"description": "Angular file upload directives with Chunk Upload", "description": "Angular file upload directives",
"scripts": { "scripts": {
"lite-server": "lite-server -c demo/bs-config.json", "lite-server": "lite-server -c demo/bs-config.json",
"demo.serve": "run-s build link demo.build lite-server", "demo.serve": "run-s build link demo.build lite-server",
@@ -22,7 +22,7 @@
"test-coverage": "ng test -sr -cc", "test-coverage": "ng test -sr -cc",
"version": "npm run flow.changelog && git add -A" "version": "npm run flow.changelog && git add -A"
}, },
"main": "bundles/ng2-chunk-file-upload.umd.js", "main": "bundles/ng2-file-upload.umd.js",
"module": "index.js", "module": "index.js",
"typings": "index.d.ts", "typings": "index.d.ts",
"keywords": [ "keywords": [
@@ -31,98 +31,89 @@
"angularjs", "angularjs",
"twitter-bootstrap", "twitter-bootstrap",
"file-upload", "file-upload",
"angular-file-upload", "angular-file-upload"
"chunk-file-upload",
"azure-blob-storage"
], ],
"author": "Paulo Peres Jr <paulo@myog.io>", "author": "Vyacheslav Chub <vyacheslav.chub@valor-software.com>",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+ssh://git@github.com/PauloPeres/ng2-chunk-file-upload.git" "url": "git+ssh://git@github.com/valor-software/ng2-file-upload.git"
}, },
"bugs": { "bugs": {
"url": "https://github.com/PauloPeres/ng2-chunk-file-upload/issues" "url": "https://github.com/valor-software/ng2-file-upload/issues"
}, },
"homepage": "https://github.com/PauloPeres/ng2-chunk-file-upload#readme", "homepage": "https://github.com/valor-software/ng2-file-upload#readme",
"dependencies": {}, "dependencies": {},
"peerDependencies": { "peerDependencies": {
"@angular/common": "^4.3.0 || >=4.3.0", "@angular/common": "^2.3.1 || >=4.0.0",
"@angular/core": "^4.3.0 || >=4.3.0", "@angular/core": "^2.3.1 || >=4.0.0"
"@angular/http": "^4.3.0 || >=4.3.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.6.3", "@angular/cli": "1.0.0",
"@angular/cdk": "^6.1.0", "@angular/common": "2.4.3",
"@angular/cli": "^6.0.3", "@angular/compiler": "2.4.3",
"@angular/common": "^6.0.1", "@angular/compiler-cli": "2.4.3",
"@angular/compiler": "^6.0.1", "@angular/core": "2.4.3",
"@angular/compiler-cli": "^6.0.1", "@angular/forms": "2.4.3",
"@angular/core": "^6.0.1", "@angular/http": "2.4.3",
"@angular/forms": "^6.0.1", "@angular/language-service": "2.4.3",
"@angular/http": "^6.0.1", "@angular/platform-browser": "2.4.3",
"@angular/language-service": "^6.0.1", "@angular/platform-browser-dynamic": "2.4.3",
"@angular/material": "^6.1.0", "@angular/router": "3.4.3",
"@angular/platform-browser": "^6.0.1", "@angular/tsc-wrapped": "0.5.1",
"@angular/platform-browser-dynamic": "^6.0.1", "@types/jasmine": "2.5.40",
"@angular/router": "^6.0.1", "@types/marked": "0.0.28",
"@angular/tsc-wrapped": "4.4.6", "@types/node": "7.0.0",
"@types/jasmine": "2.8.7", "@types/webpack": "^2.2.1",
"@types/marked": "0.3.0", "bootstrap": "3.3.7",
"@types/node": "10.1.2",
"@types/webpack": "^4.4.0",
"ajv": "^6.0.0",
"bootstrap": "4.1.1",
"chokidar-cli": "1.2.0", "chokidar-cli": "1.2.0",
"classlist-polyfill": "1.2.0", "classlist-polyfill": "1.0.3",
"codecov": "3.0.2", "codecov": "1.0.1",
"codelyzer": "~4.3.0", "codelyzer": "~2.0.0-beta.4",
"conventional-changelog-cli": "1.3.22", "conventional-changelog-cli": "1.2.0",
"conventional-github-releaser": "2.0.2", "conventional-github-releaser": "1.1.3",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"cpy": "7.0.0", "cpy": "5.0.0",
"cpy-cli": "1.0.1", "cpy-cli": "1.0.1",
"del-cli": "1.1.0", "del-cli": "0.2.1",
"gh-pages": "1.1.0", "gh-pages": "0.12.0",
"gitignore-to-glob": "0.3.0", "gitignore-to-glob": "0.3.0",
"google-code-prettify": "1.0.5", "google-code-prettify": "1.0.5",
"html-loader": "0.5.5", "html-loader": "0.4.4",
"jasmine": "3.1.0", "jasmine": "2.5.3",
"jasmine-core": "3.1.0", "jasmine-core": "2.5.2",
"jasmine-data-provider": "2.2.0", "jasmine-data-provider": "2.2.0",
"jasmine-spec-reporter": "4.2.1", "jasmine-spec-reporter": "3.2.0",
"jquery": "^1.9.1", "karma": "1.4.0",
"karma": "2.0.2",
"karma-chrome-launcher": "^2.0.0", "karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1", "karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.1", "karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "^1.0.2", "karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "0.6.0", "karma-remap-istanbul": "0.4.0",
"karma-sauce-launcher": "1.2.0", "karma-sauce-launcher": "1.1.0",
"lite-server": "2.3.0", "lite-server": "2.2.2",
"lodash": "4.17.10", "lodash": "4.17.4",
"markdown-loader": "^2.0.2", "markdown-loader": "^0.1.7",
"marked": "0.4.0", "marked": "0.3.6",
"ngm-cli": "1.0.4", "ng2-page-scroll": "4.0.0-beta.2",
"ngx-bootstrap": "3.0.0", "ngm-cli": "0.4.0",
"ngx-bootstrap": "1.6.6",
"npm-run-all": "^4.0.1", "npm-run-all": "^4.0.1",
"popper.js": "^1.14.3",
"pre-commit": "1.2.2", "pre-commit": "1.2.2",
"protractor": "5.3.2", "protractor": "5.0.0",
"reflect-metadata": "0.1.12", "reflect-metadata": "0.1.9",
"require-dir": "1.0.0", "require-dir": "0.3.1",
"rxjs": "^6.2.0", "rxjs": "5.0.3",
"rxjs-compat": "^6.1.0", "systemjs-builder": "0.15.34",
"rxjs-tslint": "^0.1.4",
"systemjs-builder": "0.16.13",
"ts-helpers": "^1.1.1", "ts-helpers": "^1.1.1",
"ts-node": "6.0.3", "ts-node": "2.0.0",
"tslint": "5.10.0", "tslint": "4.3.1",
"typedoc": "0.11.1", "tslint-config-valorsoft": "1.2.0",
"typescript": "^2.7.2", "typedoc": "0.5.5",
"wallaby-webpack": "3.9.8", "typescript": "2.1.5",
"webdriver-manager": "12.0.6", "wallaby-webpack": "0.0.30",
"zone.js": "0.8.26" "webdriver-manager": "11.1.1",
"zone.js": "0.7.5"
}, },
"contributors": [ "contributors": [
{ {
@@ -144,11 +135,6 @@
"name": "Oleksandr Telnov", "name": "Oleksandr Telnov",
"email": "otelnov@gmail.com", "email": "otelnov@gmail.com",
"url": "https://github.com/otelnov" "url": "https://github.com/otelnov"
},
{
"name": "Paulo Peres Jr",
"email": "paulo@myog.io",
"url": "https://github.com/PauloPeres/"
} }
] ]
} }

View File

@@ -1,242 +0,0 @@
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);
});
}
}

View File

@@ -4,83 +4,83 @@ import { FileUploader, FileUploaderOptions } from './file-uploader.class';
@Directive({ selector: '[ng2FileDrop]' }) @Directive({ selector: '[ng2FileDrop]' })
export class FileDropDirective { export class FileDropDirective {
@Input() public uploader: FileUploader; @Input() public uploader: FileUploader;
@Output() public fileOver: EventEmitter<any> = new EventEmitter(); @Output() public fileOver: EventEmitter<any> = new EventEmitter();
@Output() public onFileDrop: EventEmitter<File[]> = new EventEmitter<File[]>(); @Output() public onFileDrop: EventEmitter<File[]> = new EventEmitter<File[]>();
protected element: ElementRef; protected element: ElementRef;
public constructor(element: ElementRef) { public constructor(element: ElementRef) {
this.element = element; this.element = element;
} }
public getOptions(): FileUploaderOptions { public getOptions(): FileUploaderOptions {
return this.uploader.options; return this.uploader.options;
} }
public getFilters(): any { public getFilters(): any {
return {}; return {};
} }
@HostListener('drop', ['$event']) @HostListener('drop', [ '$event' ])
public onDrop(event: any): void { public onDrop(event: any): void {
let transfer = this._getTransfer(event); let transfer = this._getTransfer(event);
if (!transfer) { if (!transfer) {
return; return;
} }
let options = this.getOptions(); let options = this.getOptions();
let filters = this.getFilters(); let filters = this.getFilters();
this._preventAndStop(event); this._preventAndStop(event);
this.uploader.addToQueue(transfer.files, options, filters); this.uploader.addToQueue(transfer.files, options, filters);
this.fileOver.emit(false); this.fileOver.emit(false);
this.onFileDrop.emit(transfer.files); this.onFileDrop.emit(transfer.files);
} }
@HostListener('dragover', ['$event']) @HostListener('dragover', [ '$event' ])
public onDragOver(event: any): void { public onDragOver(event: any): void {
let transfer = this._getTransfer(event); let transfer = this._getTransfer(event);
if (!this._haveFiles(transfer.types)) { if (!this._haveFiles(transfer.types)) {
return; return;
} }
transfer.dropEffect = 'copy'; transfer.dropEffect = 'copy';
this._preventAndStop(event); this._preventAndStop(event);
this.fileOver.emit(true); this.fileOver.emit(true);
} }
@HostListener('dragleave', ['$event']) @HostListener('dragleave', [ '$event' ])
public onDragLeave(event: any): any { public onDragLeave(event: any): any {
if ((this as any).element) { if ((this as any).element) {
if (event.currentTarget === (this as any).element[0]) { if (event.currentTarget === (this as any).element[ 0 ]) {
return; return;
} }
} }
this._preventAndStop(event); this._preventAndStop(event);
this.fileOver.emit(false); this.fileOver.emit(false);
} }
protected _getTransfer(event: any): any { protected _getTransfer(event: any): any {
return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; // jQuery fix; return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; // jQuery fix;
} }
protected _preventAndStop(event: any): any { protected _preventAndStop(event: any): any {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
protected _haveFiles(types: any): any { protected _haveFiles(types: any): any {
if (!types) { if (!types) {
return false; return false;
} }
if (types.indexOf) { if (types.indexOf) {
return types.indexOf('Files') !== -1; return types.indexOf('Files') !== -1;
} else if (types.contains) { } else if (types.contains) {
return types.contains('Files'); return types.contains('Files');
} else { } else {
return false; return false;
} }
} }
} }

View File

@@ -1,210 +1,154 @@
import { HttpHeaders } from '@angular/common/http';
import { FileLikeObject } from './file-like-object.class'; import { FileLikeObject } from './file-like-object.class';
import { FileUploader, FileUploaderOptions } from './file-uploader.class'; import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class';
import { FileChunk } from './file-chunk.class'
export class FileItem { export class FileItem {
public file: FileLikeObject; public file: FileLikeObject;
public _file: File; public _file: File;
public id: any; public alias: string;
public alias: string; public url: string = '/';
public url: string = '/'; public method: string;
public method: string; public headers: any = [];
public headers: any = []; public withCredentials: boolean = true;
public withCredentials: boolean = true; public formData: any = [];
public formData: any = []; public isReady: boolean = false;
public isReady: boolean = false; public isUploading: boolean = false;
public isUploading: boolean = false; public isUploaded: boolean = false;
public isUploaded: boolean = false; public isSuccess: boolean = false;
public isSuccess: boolean = false; public isCancel: boolean = false;
public isCancel: boolean = false; public isError: boolean = false;
public isError: boolean = false; public progress: number = 0;
public isRemoving: boolean = false; public index: number = void 0;
public progress: number = 0; public _xhr: XMLHttpRequest;
public index: number = void 0; public _form: any;
public downloadUrl?: string = null;
public _form: any;
public _fileChunks: FileChunk;
protected chunkTotalRetries = 10; protected uploader: FileUploader;
protected chunkRetries = 0; protected some: File;
protected uploader: FileUploader; protected options: FileUploaderOptions;
protected some: File;
protected options: FileUploaderOptions;
public constructor(uploader: FileUploader, some: File, options: FileUploaderOptions) { public constructor(uploader: FileUploader, some: File, options: FileUploaderOptions) {
this.uploader = uploader; this.uploader = uploader;
this.some = some; this.some = some;
this.options = options; this.options = options;
this.file = new FileLikeObject(some); this.file = new FileLikeObject(some);
this._file = some; this._file = some;
if (uploader.options) {
this.method = uploader.options.method || 'POST';
this.alias = uploader.options.itemAlias || 'file';
}
this.url = uploader.options.url;
}
if (uploader.options) { public upload(): void {
this.method = uploader.options.method || 'POST'; try {
this.alias = uploader.options.itemAlias || 'file'; this.uploader.uploadItem(this);
} } catch (e) {
this.url = uploader.options.url; this.uploader._onCompleteItem(this, '', 0, {});
} this.uploader._onErrorItem(this, '', 0, {});
public upload(): void { }
try { }
this.uploader.uploadItem(this);
} catch (e) {
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: HttpHeaders): any {
return { response, status, headers };
}
public onError(response: string, status: number, headers: HttpHeaders): any {
return { response, status, headers };
}
public onCancel(): any {
return {};
}
public onComplete(response: string, status: number, headers: HttpHeaders): any {
return { response, status, headers };
}
public onCompleteChunk(response: string, status: number, headers: HttpHeaders): any {
return { response, status, headers };
}
public _onBeforeUpload(): void {
this.isReady = true;
this.isUploading = true;
this.isUploaded = false;
this.isSuccess = false;
this.isCancel = false;
this.isError = false;
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: HttpHeaders): void {
this.isReady = false;
this.isUploading = false;
this.isUploaded = true;
this.isSuccess = true;
this.isCancel = false;
this.isError = false;
this.progress = 100;
this.index = void 0;
this.onSuccess(response, status, headers);
}
public _onError(response: string, status: number, headers: HttpHeaders): void {
this.isReady = false;
this.isUploading = false;
this.isUploaded = true;
this.isSuccess = false;
this.isCancel = false;
this.isError = true;
this.progress = 0;
this.index = void 0;
this.onError(response, status, headers);
}
public _onCancel(): void {
this.isReady = false;
this.isUploading = false;
this.isUploaded = false;
this.isSuccess = false;
this.isCancel = true;
this.isError = false;
this.progress = 0;
this.index = void 0;
this.onCancel();
}
public _onComplete(response: string, status: number, headers: HttpHeaders): void {
this.onComplete(response, status, headers);
if (this.uploader.options.removeAfterUpload) { public cancel(): void {
this.remove(); this.uploader.cancelItem(this);
} }
}
public _onCompleteChunk(response: string, status: number, headers: HttpHeaders): void { public remove(): void {
this.chunkRetries = 0; this.uploader.removeFromQueue(this);
this._onCompleteChunkCallNext(); }
this.onCompleteChunk(response, status, headers);
} public onBeforeUpload(): void {
public _onCompleteChunkCallNext(): void { return void 0;
this.uploader.uploaderService.uploadFile(this,this.uploader.options); }
this.prepareNextChunk()
} public onBuildForm(form: any): any {
public _onErrorChunk(response: string, status: number, headers: HttpHeaders): void { return { form };
if (this.chunkRetries > this.chunkTotalRetries) { }
this.uploader.onErrorItem(this, response, status, headers);
this.uploader.onCompleteItem(this, response, status, headers); public onProgress(progress: number): any {
} else { return { progress };
this.chunkRetries++; }
this.fileChunks.retrocedeChunk();
this._onCompleteChunkCallNext(); public onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any {
} return { response, status, headers };
} }
public _prepareToUploading(): void {
this.index = this.index || ++this.uploader._nextIndex; public onError(response: string, status: number, headers: ParsedResponseHeaders): any {
this.isReady = true; return { response, status, headers };
} }
public onCancel(response: string, status: number, headers: ParsedResponseHeaders): any {
return { response, status, headers };
}
public onComplete(response: string, status: number, headers: ParsedResponseHeaders): any {
return { response, status, headers };
}
public _onBeforeUpload(): void {
this.isReady = true;
this.isUploading = true;
this.isUploaded = false;
this.isSuccess = false;
this.isCancel = false;
this.isError = false;
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 {
this.isReady = false;
this.isUploading = false;
this.isUploaded = true;
this.isSuccess = true;
this.isCancel = false;
this.isError = false;
this.progress = 100;
this.index = void 0;
this.onSuccess(response, status, headers);
}
public _onError(response: string, status: number, headers: ParsedResponseHeaders): void {
this.isReady = false;
this.isUploading = false;
this.isUploaded = true;
this.isSuccess = false;
this.isCancel = false;
this.isError = true;
this.progress = 0;
this.index = void 0;
this.onError(response, status, headers);
}
public _onCancel(response: string, status: number, headers: ParsedResponseHeaders): void {
this.isReady = false;
this.isUploading = false;
this.isUploaded = false;
this.isSuccess = false;
this.isCancel = true;
this.isError = false;
this.progress = 0;
this.index = void 0;
this.onCancel(response, status, headers);
}
public _onComplete(response: string, status: number, headers: ParsedResponseHeaders): void {
this.onComplete(response, status, headers);
if (this.uploader.options.removeAfterUpload) {
this.remove();
}
}
public _prepareToUploading(): void {
this.index = this.index || ++this.uploader._nextIndex;
this.isReady = true;
}
} }

View File

@@ -1,33 +1,33 @@
function isElement(node: any): boolean { function isElement(node: any): boolean {
return !!(node && (node.nodeName || node.prop && node.attr && node.find)); return !!(node && (node.nodeName || node.prop && node.attr && node.find));
} }
export class FileLikeObject { export class FileLikeObject {
public lastModifiedDate: any; public lastModifiedDate: any;
public size: any; public size: any;
public type: string; public type: string;
public name: string; public name: string;
public rawFile: string; public rawFile: string;
public constructor(fileOrInput: any) { public constructor(fileOrInput: any) {
this.rawFile = fileOrInput; this.rawFile = fileOrInput;
let isInput = isElement(fileOrInput); let isInput = isElement(fileOrInput);
let fakePathOrObject = isInput ? fileOrInput.value : fileOrInput; let fakePathOrObject = isInput ? fileOrInput.value : fileOrInput;
let postfix = typeof fakePathOrObject === 'string' ? 'FakePath' : 'Object'; let postfix = typeof fakePathOrObject === 'string' ? 'FakePath' : 'Object';
let method = '_createFrom' + postfix; let method = '_createFrom' + postfix;
(this as any)[method](fakePathOrObject); (this as any)[ method ](fakePathOrObject);
} }
public _createFromFakePath(path: string): void { public _createFromFakePath(path: string): void {
this.lastModifiedDate = void 0; this.lastModifiedDate = void 0;
this.size = void 0; this.size = void 0;
this.type = 'like/' + path.slice(path.lastIndexOf('.') + 1).toLowerCase(); this.type = 'like/' + path.slice(path.lastIndexOf('.') + 1).toLowerCase();
this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2); this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2);
} }
public _createFromObject(object: { size: number, type: string, name: string }): void { public _createFromObject(object: { size: number, type: string, name: string }): void {
this.size = object.size; this.size = object.size;
this.type = object.type; this.type = object.type;
this.name = object.name; this.name = object.name;
} }
} }

View File

@@ -4,38 +4,38 @@ import { FileUploader } from './file-uploader.class';
@Directive({ selector: '[ng2FileSelect]' }) @Directive({ selector: '[ng2FileSelect]' })
export class FileSelectDirective { export class FileSelectDirective {
@Input() public uploader: FileUploader; @Input() public uploader: FileUploader;
@Output() public onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>(); @Output() public onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
protected element: ElementRef; protected element: ElementRef;
public constructor(element: ElementRef) { public constructor(element: ElementRef) {
this.element = element; this.element = element;
} }
public getOptions(): any { public getOptions(): any {
return this.uploader.options; return this.uploader.options;
} }
public getFilters(): any { public getFilters(): any {
return {}; return {};
} }
public isEmptyAfterSelection(): boolean { public isEmptyAfterSelection(): boolean {
return !!this.element.nativeElement.attributes.multiple; return !!this.element.nativeElement.attributes.multiple;
} }
@HostListener('change') @HostListener('change')
public onChange(): any { public onChange(): any {
let files = this.element.nativeElement.files; let files = this.element.nativeElement.files;
let options = this.getOptions(); let options = this.getOptions();
let filters = this.getFilters(); let filters = this.getFilters();
this.uploader.addToQueue(files, options, filters); this.uploader.addToQueue(files, options, filters);
this.onFileSelected.emit(files); this.onFileSelected.emit(files);
if (this.isEmptyAfterSelection()) { if (this.isEmptyAfterSelection()) {
this.element.nativeElement.value = ''; this.element.nativeElement.value = '';
} }
} }
} }

View File

@@ -1,164 +1,164 @@
import { FileLikeObject } from "../ng2-chunk-file-upload"; import { FileLikeObject } from "../ng2-file-upload";
export class FileType { export class FileType {
/* MS office */ /* MS office */
public static mime_doc: string[] = [ public static mime_doc: string[] = [
'application/msword', 'application/msword',
'application/msword', 'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.openxmlformats-officedocument.wordprocessingml.template', 'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
'application/vnd.ms-word.document.macroEnabled.12', 'application/vnd.ms-word.document.macroEnabled.12',
'application/vnd.ms-word.template.macroEnabled.12' 'application/vnd.ms-word.template.macroEnabled.12'
]; ];
public static mime_xsl: string[] = [ public static mime_xsl: string[] = [
'application/vnd.ms-excel', 'application/vnd.ms-excel',
'application/vnd.ms-excel', 'application/vnd.ms-excel',
'application/vnd.ms-excel', 'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
'application/vnd.ms-excel.sheet.macroEnabled.12', 'application/vnd.ms-excel.sheet.macroEnabled.12',
'application/vnd.ms-excel.template.macroEnabled.12', 'application/vnd.ms-excel.template.macroEnabled.12',
'application/vnd.ms-excel.addin.macroEnabled.12', 'application/vnd.ms-excel.addin.macroEnabled.12',
'application/vnd.ms-excel.sheet.binary.macroEnabled.12' 'application/vnd.ms-excel.sheet.binary.macroEnabled.12'
]; ];
public static mime_ppt: string[] = [ public static mime_ppt: string[] = [
'application/vnd.ms-powerpoint', 'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint', 'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint', 'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint', 'application/vnd.ms-powerpoint',
'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.template',
'application/vnd.openxmlformats-officedocument.presentationml.slideshow', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
'application/vnd.ms-powerpoint.addin.macroEnabled.12', 'application/vnd.ms-powerpoint.addin.macroEnabled.12',
'application/vnd.ms-powerpoint.presentation.macroEnabled.12', 'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'application/vnd.ms-powerpoint.presentation.macroEnabled.12', 'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'application/vnd.ms-powerpoint.slideshow.macroEnabled.12' 'application/vnd.ms-powerpoint.slideshow.macroEnabled.12'
]; ];
/* PSD */ /* PSD */
public static mime_psd: string[] = [ public static mime_psd: string[] = [
'image/photoshop', 'image/photoshop',
'image/x-photoshop', 'image/x-photoshop',
'image/psd', 'image/psd',
'application/photoshop', 'application/photoshop',
'application/psd', 'application/psd',
'zz-application/zz-winassoc-psd' 'zz-application/zz-winassoc-psd'
]; ];
/* Compressed files */ /* Compressed files */
public static mime_compress: string[] = [ public static mime_compress: string[] = [
'application/x-gtar', 'application/x-gtar',
'application/x-gcompress', 'application/x-gcompress',
'application/compress', 'application/compress',
'application/x-tar', 'application/x-tar',
'application/x-rar-compressed', 'application/x-rar-compressed',
'application/octet-stream', 'application/octet-stream',
'application/x-zip-compressed', 'application/x-zip-compressed',
'application/zip-compressed', 'application/zip-compressed',
'application/x-7z-compressed', 'application/x-7z-compressed',
'application/gzip', 'application/gzip',
'application/x-bzip2' 'application/x-bzip2'
]; ];
public static getMimeClass(file: FileLikeObject): string { public static getMimeClass(file: FileLikeObject): string {
let mimeClass = 'application'; let mimeClass = 'application';
if (this.mime_psd.indexOf(file.type) !== -1) { if (this.mime_psd.indexOf(file.type) !== -1) {
mimeClass = 'image'; mimeClass = 'image';
} else if (file.type.match('image.*')) { } else if (file.type.match('image.*')) {
mimeClass = 'image'; mimeClass = 'image';
} else if (file.type.match('video.*')) { } else if (file.type.match('video.*')) {
mimeClass = 'video'; mimeClass = 'video';
} else if (file.type.match('audio.*')) { } else if (file.type.match('audio.*')) {
mimeClass = 'audio'; mimeClass = 'audio';
} else if (file.type === 'application/pdf') { } else if (file.type === 'application/pdf') {
mimeClass = 'pdf'; mimeClass = 'pdf';
} else if (this.mime_compress.indexOf(file.type) !== -1) { } else if (this.mime_compress.indexOf(file.type) !== -1) {
mimeClass = 'compress'; mimeClass = 'compress';
} else if (this.mime_doc.indexOf(file.type) !== -1) { } else if (this.mime_doc.indexOf(file.type) !== -1) {
mimeClass = 'doc'; mimeClass = 'doc';
} else if (this.mime_xsl.indexOf(file.type) !== -1) { } else if (this.mime_xsl.indexOf(file.type) !== -1) {
mimeClass = 'xls'; mimeClass = 'xls';
} else if (this.mime_ppt.indexOf(file.type) !== -1) { } else if (this.mime_ppt.indexOf(file.type) !== -1) {
mimeClass = 'ppt'; mimeClass = 'ppt';
} }
if (mimeClass === 'application') { if (mimeClass === 'application') {
mimeClass = this.fileTypeDetection(file.name); mimeClass = this.fileTypeDetection(file.name);
} }
return mimeClass; return mimeClass;
} }
public static fileTypeDetection(inputFilename: string): string { public static fileTypeDetection(inputFilename: string): string {
let types: { [key: string]: string } = { let types: { [ key: string ]: string } = {
'jpg': 'image', 'jpg': 'image',
'jpeg': 'image', 'jpeg': 'image',
'tif': 'image', 'tif': 'image',
'psd': 'image', 'psd': 'image',
'bmp': 'image', 'bmp': 'image',
'png': 'image', 'png': 'image',
'nef': 'image', 'nef': 'image',
'tiff': 'image', 'tiff': 'image',
'cr2': 'image', 'cr2': 'image',
'dwg': 'image', 'dwg': 'image',
'cdr': 'image', 'cdr': 'image',
'ai': 'image', 'ai': 'image',
'indd': 'image', 'indd': 'image',
'pin': 'image', 'pin': 'image',
'cdp': 'image', 'cdp': 'image',
'skp': 'image', 'skp': 'image',
'stp': 'image', 'stp': 'image',
'3dm': 'image', '3dm': 'image',
'mp3': 'audio', 'mp3': 'audio',
'wav': 'audio', 'wav': 'audio',
'wma': 'audio', 'wma': 'audio',
'mod': 'audio', 'mod': 'audio',
'm4a': 'audio', 'm4a': 'audio',
'compress': 'compress', 'compress': 'compress',
'zip': 'compress', 'zip': 'compress',
'rar': 'compress', 'rar': 'compress',
'7z': 'compress', '7z': 'compress',
'lz': 'compress', 'lz': 'compress',
'z01': 'compress', 'z01': 'compress',
'bz2': 'compress', 'bz2': 'compress',
'gz': 'compress', 'gz': 'compress',
'pdf': 'pdf', 'pdf': 'pdf',
'xls': 'xls', 'xls': 'xls',
'xlsx': 'xls', 'xlsx': 'xls',
'ods': 'xls', 'ods': 'xls',
'mp4': 'video', 'mp4': 'video',
'avi': 'video', 'avi': 'video',
'wmv': 'video', 'wmv': 'video',
'mpg': 'video', 'mpg': 'video',
'mts': 'video', 'mts': 'video',
'flv': 'video', 'flv': 'video',
'3gp': 'video', '3gp': 'video',
'vob': 'video', 'vob': 'video',
'm4v': 'video', 'm4v': 'video',
'mpeg': 'video', 'mpeg': 'video',
'm2ts': 'video', 'm2ts': 'video',
'mov': 'video', 'mov': 'video',
'doc': 'doc', 'doc': 'doc',
'docx': 'doc', 'docx': 'doc',
'eps': 'doc', 'eps': 'doc',
'txt': 'doc', 'txt': 'doc',
'odt': 'doc', 'odt': 'doc',
'rtf': 'doc', 'rtf': 'doc',
'ppt': 'ppt', 'ppt': 'ppt',
'pptx': 'ppt', 'pptx': 'ppt',
'pps': 'ppt', 'pps': 'ppt',
'ppsx': 'ppt', 'ppsx': 'ppt',
'odp': 'ppt' 'odp': 'ppt'
}; };
let chunks = inputFilename.split('.'); let chunks = inputFilename.split('.');
if (chunks.length < 2) { if (chunks.length < 2) {
return 'application'; return 'application';
} }
let extension = chunks[chunks.length - 1].toLowerCase(); let extension = chunks[ chunks.length - 1 ].toLowerCase();
if (types[extension] === undefined) { if (types[ extension ] === undefined) {
return 'application'; return 'application';
} else { } else {
return types[extension]; return types[ extension ];
} }
} }
} }

View File

@@ -5,9 +5,9 @@ import { FileDropDirective } from './file-drop.directive';
import { FileSelectDirective } from './file-select.directive'; import { FileSelectDirective } from './file-select.directive';
@NgModule({ @NgModule({
imports: [CommonModule], imports: [ CommonModule ],
declarations: [FileDropDirective, FileSelectDirective], declarations: [ FileDropDirective, FileSelectDirective ],
exports: [FileDropDirective, FileSelectDirective] exports: [ FileDropDirective, FileSelectDirective ]
}) })
export class FileUploadModule { export class FileUploadModule {
} }

View File

@@ -1,484 +1,498 @@
import { Headers } from './file-uploader.class';
import { EventEmitter } from '@angular/core'; import { EventEmitter } from '@angular/core';
import { FileLikeObject } from './file-like-object.class'; import { FileLikeObject } from './file-like-object.class';
import { FileItem } from './file-item.class'; import { FileItem } from './file-item.class';
import { FileType } from './file-type.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 { function isFile(value: any): boolean {
return (File && value instanceof File); return (File && value instanceof File);
} }
export interface Headers { export interface Headers {
name: string; name: string;
value: string; value: string;
} }
export type ParsedResponseHeaders = { [ headerFieldName: string ]: string };
export type FilterFunction = { export type FilterFunction = {
name: string, name: string,
fn: (item?: FileLikeObject, options?: FileUploaderOptions) => boolean fn: (item?: FileLikeObject, options?: FileUploaderOptions) => boolean
}; };
export interface FileUploaderOptions { export interface FileUploaderOptions {
uploaderService: any; allowedMimeType?: string[];
allowedMimeType?: string[]; allowedFileType?: string[];
allowedFileType?: string[]; autoUpload?: boolean;
autoUpload?: boolean; isHTML5?: boolean;
isHTML5?: boolean; filters?: FilterFunction[];
filters?: FilterFunction[]; headers?: Headers[];
headers?: Headers[]; method?: string;
method?: string; authToken?: string;
authToken?: string; maxFileSize?: number;
maxFileSize?: number; queueLimit?: number;
queueLimit?: number; removeAfterUpload?: boolean;
removeAfterUpload?: boolean; url?: string;
url?: string; disableMultipart?: boolean;
disableMultipart?: boolean; itemAlias?: string;
itemAlias?: string; authTokenHeader?: string;
authTokenHeader?: string; additionalParameter?: { [ key: string ]: any };
additionalParameter?: { [key: string]: any }; parametersBeforeFiles?: boolean;
parametersBeforeFiles?: boolean; formatDataFunction?: Function;
formatDataFunction?: Function; formatDataFunctionIsAsync?: boolean;
formatDataFunctionIsAsync?: boolean;
} }
export class FileUploader { export class FileUploader {
public uploaderService: any;
public authToken: string;
public isUploading: boolean = false;
public queue: FileItem[] = [];
public progress: number = 0;
public _nextIndex: number = 0;
public autoUpload: any;
public authTokenHeader: string;
public response: EventEmitter<any>;
public chunkSize: number = null;
public options: FileUploaderOptions = {
uploaderService: null,
autoUpload: false,
isHTML5: true,
filters: [],
removeAfterUpload: false,
disableMultipart: false,
formatDataFunction: (item: FileItem) => item._file,
formatDataFunctionIsAsync: false
};
protected _failFilterIndex: number; public authToken: string;
public isUploading: boolean = false;
public queue: FileItem[] = [];
public progress: number = 0;
public _nextIndex: number = 0;
public autoUpload: any;
public authTokenHeader: string;
public response: EventEmitter<any>;
public constructor(options: FileUploaderOptions) { public options: FileUploaderOptions = {
this.setOptions(options); autoUpload: false,
this.response = new EventEmitter<any>(); isHTML5: true,
} filters: [],
public setOptions(options: FileUploaderOptions): void { removeAfterUpload: false,
this.options = Object.assign(this.options, options); disableMultipart: false,
this.uploaderService = this.options.uploaderService; formatDataFunction: (item: FileItem) => item._file,
this.uploaderService.uploader = this; formatDataFunctionIsAsync: false
this.authToken = this.options.authToken; };
this.authTokenHeader = this.options.authTokenHeader || 'Authorization';
this.autoUpload = this.options.autoUpload;
this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter });
if (this.options.maxFileSize) { protected _failFilterIndex: number;
this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter });
}
if (this.options.allowedFileType) { public constructor(options: FileUploaderOptions) {
this.options.filters.unshift({ name: 'fileType', fn: this._fileTypeFilter }); this.setOptions(options);
} this.response = new EventEmitter<any>();
}
if (this.options.allowedMimeType) { public setOptions(options: FileUploaderOptions): void {
this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter }); this.options = Object.assign(this.options, options);
}
for (let i = 0; i < this.queue.length; i++) { this.authToken = this.options.authToken;
this.queue[i].url = this.options.url; this.authTokenHeader = this.options.authTokenHeader || 'Authorization';
} this.autoUpload = this.options.autoUpload;
} this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter });
public addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void { if (this.options.maxFileSize) {
let list: File[] = []; this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter });
for (let file of files) { }
list.push(file);
}
let arrayOfFilters = this._getFilters(filters);
let count = this.queue.length;
let addedFileItems: FileItem[] = [];
list.map((some: File) => {
if (!options) {
options = this.options;
}
let temp = new FileLikeObject(some); if (this.options.allowedFileType) {
if (this._isValidFile(temp, arrayOfFilters, options)) { this.options.filters.unshift({ name: 'fileType', fn: this._fileTypeFilter });
let fileItem = new FileItem(this, some, options); }
addedFileItems.push(fileItem);
this.queue.push(fileItem);
this._onAfterAddingFile(fileItem);
} else {
let filter = arrayOfFilters[this._failFilterIndex];
this._onWhenAddingFileFailed(temp, filter, options);
}
});
if (this.queue.length !== count) {
this._onAfterAddingAll(addedFileItems);
this.progress = this._getTotalProgress();
}
this._render();
if (this.options.autoUpload) {
this.uploadAll();
}
}
public removeFromQueue(value: FileItem): void { if (this.options.allowedMimeType) {
let index = this.getIndexOfItem(value); this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter });
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 { for (let i = 0; i < this.queue.length; i++) {
while (this.queue.length) { this.queue[ i ].url = this.options.url;
this.queue[0].remove(); }
} }
this.progress = 0;
}
public uploadItem(value: FileItem): void { public addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void {
let index = this.getIndexOfItem(value); let list: File[] = [];
let item = this.queue[index]; for (let file of files) {
item._prepareToUploading(); list.push(file);
if (this.isUploading) { }
return; let arrayOfFilters = this._getFilters(filters);
} let count = this.queue.length;
this.isUploading = true; let addedFileItems: FileItem[] = [];
this._uploadFile(item); list.map((some: File) => {
} if (!options) {
options = this.options;
}
public cancelItem(value: FileItem): void { let temp = new FileLikeObject(some);
const index = this.getIndexOfItem(value); if (this._isValidFile(temp, arrayOfFilters, options)) {
const item = this.queue[index]; let fileItem = new FileItem(this, some, options);
if (item && item.isUploading) { addedFileItems.push(fileItem);
this.uploaderService.stopUpload() this.queue.push(fileItem);
} this._onAfterAddingFile(fileItem);
} } else {
let filter = arrayOfFilters[ this._failFilterIndex ];
this._onWhenAddingFileFailed(temp, filter, options);
}
});
if (this.queue.length !== count) {
this._onAfterAddingAll(addedFileItems);
this.progress = this._getTotalProgress();
}
this._render();
if (this.options.autoUpload) {
this.uploadAll();
}
}
public uploadAll(): void { public removeFromQueue(value: FileItem): void {
const items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading); let index = this.getIndexOfItem(value);
if (!items.length) { let item = this.queue[ index ];
return; if (item.isUploading) {
} item.cancel();
items.map((item: FileItem) => item._prepareToUploading()); }
items[0].upload(); this.queue.splice(index, 1);
} this.progress = this._getTotalProgress();
}
public cancelAll(): void { public clearQueue(): void {
const items = this.getNotUploadedItems(); while (this.queue.length) {
items.map((item: FileItem) => item.cancel()); this.queue[ 0 ].remove();
} }
this.progress = 0;
}
public isFile(value: any): boolean { public uploadItem(value: FileItem): void {
return isFile(value); let index = this.getIndexOfItem(value);
} let item = this.queue[ index ];
let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport';
item._prepareToUploading();
if (this.isUploading) {
return;
}
this.isUploading = true;
(this as any)[ transport ](item);
}
public isFileLikeObject(value: any): boolean { public cancelItem(value: FileItem): void {
return value instanceof FileLikeObject; let index = this.getIndexOfItem(value);
} let item = this.queue[ index ];
let prop = this.options.isHTML5 ? item._xhr : item._form;
if (item && item.isUploading) {
prop.abort();
}
}
public getIndexOfItem(value: any): number { public uploadAll(): void {
return typeof value === 'number' ? value : this.queue.indexOf(value); let items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading);
} if (!items.length) {
return;
}
items.map((item: FileItem) => item._prepareToUploading());
items[ 0 ].upload();
}
public getIsErrorItems(): any[] { public cancelAll(): void {
return this.queue.filter((item: FileItem) => item.isError); let items = this.getNotUploadedItems();
} items.map((item: FileItem) => item.cancel());
}
public getIsCancelItems(): any[] { public isFile(value: any): boolean {
return this.queue.filter((item: FileItem) => item.isCancel); return isFile(value);
} }
public getIsSuccessItems(): any[] { public isFileLikeObject(value: any): boolean {
return this.queue.filter((item: FileItem) => item.isSuccess); return value instanceof FileLikeObject;
} }
public getAllItems(): any[] { public getIndexOfItem(value: any): number {
return this.queue; return typeof value === 'number' ? value : this.queue.indexOf(value);
} }
public getNotUploadedItems(): any[] {
return this.queue.filter((item: FileItem) => !item.isUploaded);
}
public getNotUploadedItems(): any[] { public getReadyItems(): any[] {
return this.queue.filter((item: FileItem) => !item.isUploaded); return this.queue
} .filter((item: FileItem) => (item.isReady && !item.isUploading))
.sort((item1: any, item2: any) => item1.index - item2.index);
}
public getReadyItems(): any[] { public destroy(): void {
return this.queue return void 0;
.filter((item: FileItem) => (item.isReady && !item.isUploading)) }
.sort((item1: any, item2: any) => item1.index - item2.index);
}
public destroy(): void { public onAfterAddingAll(fileItems: any): any {
return void 0; return { fileItems };
} }
public onAfterAddingAll(fileItems: any): any { public onBuildItemForm(fileItem: FileItem, form: any): any {
return { fileItems }; return { fileItem, form };
} }
public onBuildItemForm(fileItem: FileItem, form: any): any { public onAfterAddingFile(fileItem: FileItem): any {
return { fileItem, form }; return { fileItem };
} }
public onAfterAddingFile(fileItem: FileItem): any { public onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): any {
return { fileItem }; return { item, filter, options };
} }
public onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): any { public onBeforeUploadItem(fileItem: FileItem): any {
return { item, filter, options }; return { fileItem };
} }
public onBeforeUploadItem(fileItem: FileItem): any { public onProgressItem(fileItem: FileItem, progress: any): any {
return { fileItem }; return { fileItem, progress };
} }
public onProgressItem(fileItem: FileItem, progress: any): any { public onProgressAll(progress: any): any {
return { fileItem, progress }; return { progress };
} }
public onProgressAll(progress: any): any { public onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { progress }; return { item, response, status, headers };
} }
public onSuccessItem(item: FileItem, response: string, status: number, headers: HttpHeaders): any { public onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { item, response, status, headers }; return { item, response, status, headers };
} }
public onErrorItem(item: FileItem, response: string, status: number, headers: HttpHeaders): any { public onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { item, response, status, headers }; return { item, response, status, headers };
} }
public onCancelItem(item: FileItem): any { public onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { item }; return { item, response, status, headers };
} }
public onRemoveItem(item: FileItem): any {
return { item };
}
public onCompleteChunk(item: FileItem, response: string, status: number, headers: HttpHeaders): any {
return { item, response, status, headers };
}
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 };
}
public onCompleteAll(): any { public onCompleteAll(): any {
return void 0; return void 0;
} }
public _mimeTypeFilter(item: FileLikeObject): boolean { public _mimeTypeFilter(item: FileLikeObject): boolean {
return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1); return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1);
} }
public _fileSizeFilter(item: FileLikeObject): boolean { public _fileSizeFilter(item: FileLikeObject): boolean {
return !(this.options.maxFileSize && item.size > this.options.maxFileSize); return !(this.options.maxFileSize && item.size > this.options.maxFileSize);
} }
public _fileTypeFilter(item: FileLikeObject): boolean { public _fileTypeFilter(item: FileLikeObject): boolean {
return !(this.options.allowedFileType && return !(this.options.allowedFileType &&
this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1); this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1);
} }
public _onErrorItem(item: FileItem, response: string, status: number, headers: HttpHeaders): void { public _onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
item._onError(response, status, headers); item._onError(response, status, headers);
this.onErrorItem(item, response, status, headers); this.onErrorItem(item, response, status, headers);
} }
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];
this.isUploading = false;
if (nextItem) {
nextItem.upload();
return;
}
this.onCompleteAll();
this.progress = this._getTotalProgress();
this._render();
}
protected _onProgress(event: HttpProgressEvent, item: FileItem) { public _onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
event = event; item._onComplete(response, status, headers);
let progress = (100 * event.loaded / event.total); this.onCompleteItem(item, response, status, headers);
if (this.uploaderService.options.chunkSize > 0) { let nextItem = this.getReadyItems()[ 0 ];
progress = ( 100 * item.getCurrentChunk() / item.getTotalChunks() ) + (progress / item.getTotalChunks() ); this.isUploading = false;
} if (nextItem) {
// TODO: Check why it's not showing upload progress per item only on complete. nextItem.upload();
this._onProgressItem(item, Math.round(progress) ); return;
} }
public onProgress(event: HttpProgressEvent, item: FileItem) { this.onCompleteAll();
this._onProgress(event, item); this.progress = this._getTotalProgress();
} this._render();
protected _onStart(event: HttpSentEvent, item: FileItem) { }
} protected _headersGetter(parsedHeaders: ParsedResponseHeaders): any {
public onStart(event: HttpSentEvent, item: FileItem) { return (name: any): any => {
this._onStart(event, item); if (name) {
} return parsedHeaders[ name.toLowerCase() ] || void 0;
protected _onLoad(event: HttpResponse<any>, item: FileItem) { }
const headers = event.headers; return parsedHeaders;
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 {
public onLoad(event: HttpResponse<any>, item: FileItem) { let that = this;
this._onLoad(event, item); let xhr = item._xhr = new XMLHttpRequest();
} let sendable: any;
this._onBeforeUploadItem(item);
protected _onError(error: any, item: FileItem) { if (typeof item._file.size !== 'number') {
const headers: HttpHeaders = error.Headers throw new TypeError('The file specified is no longer valid');
const response = this._transformResponse(error.error, headers); }
if (this.uploaderService.options.chunkSize > 0) { if (!this.options.disableMultipart) {
this._onErrorChunk(item, response, error.status, headers); sendable = new FormData();
} else { this._onBuildItemForm(item, sendable);
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) { const appendFile = () => sendable.append(item.alias, item._file, item.file.name);
this._onAbort(error, item); if (!this.options.parametersBeforeFiles) {
} appendFile();
}
protected _uploadFile(item: FileItem): any { // For AWS, Additional Parameters must come BEFORE Files
this._onBeforeUploadItem(item); if (this.options.additionalParameter !== undefined) {
if (typeof item._file.size !== 'number') { Object.keys(this.options.additionalParameter).forEach((key: string) => {
throw new TypeError('The file specified is no longer valid'); let paramVal = this.options.additionalParameter[ key ];
} // Allow an additional parameter to include the filename
this.uploaderService.uploadFile(item, this.options); if (typeof paramVal === 'string' && paramVal.indexOf('{{file_name}}') >= 0) {
} paramVal = paramVal.replace('{{file_name}}', item.file.name);
}
sendable.append(key, paramVal);
});
}
protected _getTotalProgress(value: number = 0): number { if (this.options.parametersBeforeFiles) {
if (this.options.removeAfterUpload) { appendFile();
return value; }
} } else {
let notUploaded = this.getNotUploadedItems().length; sendable = this.options.formatDataFunction(item);
let uploaded = notUploaded ? this.queue.length - notUploaded : this.queue.length; }
let ratio = 100 / this.queue.length;
let current = value * ratio / 100;
return Math.round(uploaded * ratio + current);
}
protected _getFilters(filters: FilterFunction[] | string): FilterFunction[] { xhr.upload.onprogress = (event: any) => {
if (!filters) { let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
return this.options.filters; this._onProgressItem(item, progress);
} };
if (Array.isArray(filters)) { xhr.onload = () => {
return filters; let headers = this._parseHeaders(xhr.getAllResponseHeaders());
} let response = this._transformResponse(xhr.response, headers);
if (typeof filters === 'string') { let gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error';
let names = filters.match(/[^\s,]+/g); let method = '_on' + gist + 'Item';
return this.options.filters (this as any)[ method ](item, response, xhr.status, headers);
.filter((filter: any) => names.indexOf(filter.name) !== -1); this._onCompleteItem(item, response, xhr.status, headers);
} };
return this.options.filters; 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();
}
protected _render(): any { protected _getTotalProgress(value: number = 0): number {
return void 0; if (this.options.removeAfterUpload) {
} return value;
}
let notUploaded = this.getNotUploadedItems().length;
let uploaded = notUploaded ? this.queue.length - notUploaded : this.queue.length;
let ratio = 100 / this.queue.length;
let current = value * ratio / 100;
return Math.round(uploaded * ratio + current);
}
protected _queueLimitFilter(): boolean { protected _getFilters(filters: FilterFunction[] | string): FilterFunction[] {
return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit; if (!filters) {
} return this.options.filters;
}
if (Array.isArray(filters)) {
return filters;
}
if (typeof filters === 'string') {
let names = filters.match(/[^\s,]+/g);
return this.options.filters
.filter((filter: any) => names.indexOf(filter.name) !== -1);
}
return this.options.filters;
}
protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean { protected _render(): any {
this._failFilterIndex = -1; return void 0;
return !filters.length ? true : filters.every((filter: FilterFunction) => { }
this._failFilterIndex++;
return filter.fn.call(this, file, options);
});
}
protected _isSuccessCode(status: number): boolean { protected _queueLimitFilter(): boolean {
return (status >= 200 && status < 300) || status === 304; return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit;
} }
protected _transformResponse(response: string, headers: HttpHeaders): string { protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean {
return response; this._failFilterIndex = -1;
} return !filters.length ? true : filters.every((filter: FilterFunction) => {
this._failFilterIndex++;
return filter.fn.call(this, file, options);
});
}
protected _onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): void { protected _isSuccessCode(status: number): boolean {
this.onWhenAddingFileFailed(item, filter, options); return (status >= 200 && status < 300) || status === 304;
} }
protected _onAfterAddingFile(item: FileItem): void { protected _transformResponse(response: string, headers: ParsedResponseHeaders): string {
this.onAfterAddingFile(item); return response;
} }
protected _onAfterAddingAll(items: any): void { protected _parseHeaders(headers: string): ParsedResponseHeaders {
this.onAfterAddingAll(items); 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 _onBeforeUploadItem(item: FileItem): void { protected _onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): void {
item._onBeforeUpload(); this.onWhenAddingFileFailed(item, filter, options);
this.onBeforeUploadItem(item); }
}
public _onBuildItemForm(item: FileItem, form: any): void { protected _onAfterAddingFile(item: FileItem): void {
item._onBuildForm(form); this.onAfterAddingFile(item);
this.onBuildItemForm(item, form); }
}
protected _onProgressItem(item: FileItem, progress: any): void { protected _onAfterAddingAll(items: any): void {
const total = this._getTotalProgress(progress); this.onAfterAddingAll(items);
this.progress = total; }
item._onProgress(progress);
this.onProgressItem(item, progress);
this.onProgressAll(total);
this._render();
}
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): void { protected _onBeforeUploadItem(item: FileItem): void {
item._onCancel(); item._onBeforeUpload();
this.onCancelItem(item); this.onBeforeUploadItem(item);
} }
protected _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);
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 {
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);
}
} }

View File

@@ -1,358 +0,0 @@
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];
}
}
}

View File

@@ -3,6 +3,5 @@ export * from './file-upload/file-drop.directive';
export * from './file-upload/file-uploader.class'; export * from './file-upload/file-uploader.class';
export * from './file-upload/file-item.class'; export * from './file-upload/file-item.class';
export * from './file-upload/file-like-object.class'; export * from './file-upload/file-like-object.class';
export * from './file-upload/file-uploader.service';
export { FileUploadModule } from './file-upload/file-upload.module'; export { FileUploadModule } from './file-upload/file-upload.module';

View File

@@ -1,5 +1,5 @@
{ {
"name": "ng2-chunk-file-upload", "name": "ng2-file-upload",
"version": "1.3.0", "version": "1.3.0",
"peerDependencies": { "peerDependencies": {
"@angular/common": "*", "@angular/common": "*",

View File

@@ -28,7 +28,7 @@
], ],
"files": [ "files": [
"../scripts/typings.d.ts", "../scripts/typings.d.ts",
"./ng2-chunk-file-upload.ts", "./ng2-file-upload.ts",
"./index.ts" "./index.ts"
], ],
"angularCompilerOptions": { "angularCompilerOptions": {

View File

@@ -1,24 +0,0 @@
{
"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"
}
]
}
}

View File

@@ -1,136 +1,12 @@
{ {
"rulesDirectory": [ "extends": "tslint-config-valorsoft",
"node_modules/codelyzer" "rulesDirectory": "./node_modules/codelyzer",
], "rules": {
"rules": { "no-forward-ref": false,
"trailing-comma": [ "no-null-keyword": false,
true, "only-arrow-functions": false,
{ "no-access-missing-member": false,
"multiline": "always", "directive-selector": false,
"singleline": "never" "component-selector": false
} }
],
"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
}
} }