dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

Updating Naming and Files to Work With Services

Browse Source
This commit is contained in:
Paulo
2018-05-23 12:35:49 -03:00
parent 8ae876445e
commit 04eef8895e
27 changed files with 18544 additions and 1397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.angular-cli.json
View File

@@ -1,24 +1,20 @@
{ {
"project": { "project": {
"name": "ng2-file-upload" "name": "ng2-chunk-file-upload"
}, },
"apps": [ "apps": [
{ {
"root": "demo/src", "root": "demo/src",
"outDir": "demo/dist", "outDir": "demo/dist",
"assets": [ "assets": ["assets"],
"assets"
],
"index": "index.html", "index": "index.html",
"main": "main.ts", "main": "main.ts",
"test": "../../scripts/test.ts", "test": "../../scripts/test.ts",
"tsconfig": "tsconfig.json", "tsconfig": "tsconfig.json",
"prefix": "", "prefix": "",
"mobile": false, "mobile": false,
"styles": [ "styles": [],
], "scripts": [],
"scripts": [
],
"environmentSource": "environments/environment.ts", "environmentSource": "environments/environment.ts",
"environments": { "environments": {
"dev": "environments/environment.ts", "dev": "environments/environment.ts",

68
CHANGELOG.md
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-file-upload/compare/v1.2.0...v1.3.0) (2017-11-25) # [1.3.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.2.0...v1.3.0) (2017-11-25)
### Features ### Features
* **file-upload:** Add response and function to modify the request body ([#901](https://github.com/valor-software/ng2-file-upload/pull/901)) * **file-upload:** Add response and function to modify the request body ([#901](https://github.com/valor-software/ng2-chunk-file-upload/pull/901))
* **file-upload** add file type .zip ([#911](https://github.com/valor-software/ng2-file-upload/pull/911)) * **file-upload** add file type .zip ([#911](https://github.com/valor-software/ng2-chunk-file-upload/pull/911))
### Bug Fixes ### Bug Fixes
* **file-uploader** Update: setOptions ([#904](https://github.com/valor-software/ng2-file-upload/pull/904)) * **file-uploader** Update: setOptions ([#904](https://github.com/valor-software/ng2-chunk-file-upload/pull/904))
* **docs** Fix correct path for isHTML5 option ([#844](https://github.com/valor-software/ng2-file-upload/pull/844)) * **docs** Fix correct path for isHTML5 option ([#844](https://github.com/valor-software/ng2-chunk-file-upload/pull/844))
* **docs** Added onFileDrop() event to documentation ([#857](https://github.com/valor-software/ng2-file-upload/pull/857)) * **docs** Added onFileDrop() event to documentation ([#857](https://github.com/valor-software/ng2-chunk-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-file-upload/compare/v1.2.0...v1.2.1) (2017-04-10) ## [1.2.1](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.2.0...v1.2.1) (2017-04-10)
### Features ### Features
* **package:** relaxed peer dependencies to allow ng v4 ([#713](https://github.com/valor-software/ng2-file-upload/issues/713)) ([7704e0e](https://github.com/valor-software/ng2-file-upload/commit/7704e0e)) * **package:** relaxed peer dependencies to allow ng v4 ([#713](https://github.com/valor-software/ng2-chunk-file-upload/issues/713)) ([7704e0e](https://github.com/valor-software/ng2-chunk-file-upload/commit/7704e0e))
<a name="1.2.0"></a> <a name="1.2.0"></a>
# [1.2.0](https://github.com/valor-software/ng2-file-upload/compare/v1.1.3-0...v1.2.0) (2017-01-17) # [1.2.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.3-0...v1.2.0) (2017-01-17)
### Bug Fixes ### Bug Fixes
* **headers:** Add FileItem headers to XHR ([#553](https://github.com/valor-software/ng2-file-upload/issues/553)) ([e4a7099](https://github.com/valor-software/ng2-file-upload/commit/e4a7099)), closes [#552](https://github.com/valor-software/ng2-file-upload/issues/552) * **headers:** Add FileItem headers to XHR ([#553](https://github.com/valor-software/ng2-chunk-file-upload/issues/553)) ([e4a7099](https://github.com/valor-software/ng2-chunk-file-upload/commit/e4a7099)), closes [#552](https://github.com/valor-software/ng2-chunk-file-upload/issues/552)
### Features ### Features
* **file-select:** Clear file select automatically ([#524](https://github.com/valor-software/ng2-file-upload/issues/524)) ([410efda](https://github.com/valor-software/ng2-file-upload/commit/410efda)) * **file-select:** Clear file select automatically ([#524](https://github.com/valor-software/ng2-chunk-file-upload/issues/524)) ([410efda](https://github.com/valor-software/ng2-chunk-file-upload/commit/410efda))
* **fileUpload:** added additionalParameter ([#565](https://github.com/valor-software/ng2-file-upload/issues/565)) ([397de09](https://github.com/valor-software/ng2-file-upload/commit/397de09)) * **fileUpload:** added additionalParameter ([#565](https://github.com/valor-software/ng2-chunk-file-upload/issues/565)) ([397de09](https://github.com/valor-software/ng2-chunk-file-upload/commit/397de09))
* **package:** upgrade to ng v2.3+ ([#574](https://github.com/valor-software/ng2-file-upload/issues/574)) ([3cc6a99](https://github.com/valor-software/ng2-file-upload/commit/3cc6a99)) * **package:** upgrade to ng v2.3+ ([#574](https://github.com/valor-software/ng2-chunk-file-upload/issues/574)) ([3cc6a99](https://github.com/valor-software/ng2-chunk-file-upload/commit/3cc6a99))
<a name="1.1.3-0"></a> <a name="1.1.3-0"></a>
## [1.1.3-0](https://github.com/valor-software/ng2-file-upload/compare/v1.1.2...v1.1.3-0) (2016-10-19) ## [1.1.3-0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.2...v1.1.3-0) (2016-10-19)
### Bug Fixes ### Bug Fixes
* **typing:** added authTokenHeader property to options and file upload class ([b55c852](https://github.com/valor-software/ng2-file-upload/commit/b55c852)) * **typing:** added authTokenHeader property to options and file upload class ([b55c852](https://github.com/valor-software/ng2-chunk-file-upload/commit/b55c852))
### Features ### Features
* **build:** added support for AoT and ng-cli ([f0b2879](https://github.com/valor-software/ng2-file-upload/commit/f0b2879)), closes [#436](https://github.com/valor-software/ng2-file-upload/issues/436) * **build:** added support for AoT and ng-cli ([f0b2879](https://github.com/valor-software/ng2-chunk-file-upload/commit/f0b2879)), closes [#436](https://github.com/valor-software/ng2-chunk-file-upload/issues/436)
* **file-upload:** Add the possibility of set the token header ([#213](https://github.com/valor-software/ng2-file-upload/issues/213)) ([282295c](https://github.com/valor-software/ng2-file-upload/commit/282295c)) * **file-upload:** Add the possibility of set the token header ([#213](https://github.com/valor-software/ng2-chunk-file-upload/issues/213)) ([282295c](https://github.com/valor-software/ng2-chunk-file-upload/commit/282295c))
<a name="1.1.2"></a> <a name="1.1.2"></a>
## [1.1.2](https://github.com/valor-software/ng2-file-upload/compare/v1.1.1...v1.1.2) (2016-10-17) ## [1.1.2](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.1.1...v1.1.2) (2016-10-17)
### Features ### Features
* **package:** allow of ng2 v2.0.* and v2.*.* ([87395e6](https://github.com/valor-software/ng2-file-upload/commit/87395e6)) * **package:** allow of ng2 v2.0.* and v2.*.* ([87395e6](https://github.com/valor-software/ng2-chunk-file-upload/commit/87395e6))
<a name="1.1.1"></a> <a name="1.1.1"></a>
## [1.1.1](https://github.com/valor-software/ng2-file-upload/compare/v1.0.3...v1.1.1) (2016-10-17) ## [1.1.1](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.3...v1.1.1) (2016-10-17)
### Bug Fixes ### Bug Fixes
* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-file-upload/commit/e068511)) * **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-chunk-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-chunk-file-upload/commit/e068511))
* **zone.js:** error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-file-upload/commit/db77e89)) * **zone.js:** error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-chunk-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-chunk-file-upload/commit/db77e89))
### Features ### Features
* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-file-upload/commit/22307d2)) * **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-chunk-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-chunk-file-upload/commit/22307d2))
* **package:** angular ~2.0.1 stable release ([#425](https://github.com/valor-software/ng2-file-upload/issues/425)) ([3fec385](https://github.com/valor-software/ng2-file-upload/commit/3fec385)) * **package:** angular ~2.0.1 stable release ([#425](https://github.com/valor-software/ng2-chunk-file-upload/issues/425)) ([3fec385](https://github.com/valor-software/ng2-chunk-file-upload/commit/3fec385))
* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496)) * **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-chunk-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-file-upload/compare/v1.0.3...v1.1.0) (2016-09-21) # [1.1.0](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.3...v1.1.0) (2016-09-21)
### Bug Fixes ### Bug Fixes
* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-file-upload/commit/e068511)) * **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-chunk-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-chunk-file-upload/commit/e068511))
* **zone.js:** error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-file-upload/commit/db77e89)) * **zone.js:** error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-chunk-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-chunk-file-upload/commit/db77e89))
### Features ### Features
* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-file-upload/commit/22307d2)) * **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-chunk-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-chunk-file-upload/commit/22307d2))
* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496)) * **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-chunk-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-file-upload/compare/v1.0.2...v1.0.3) (2016-05-12) ## [1.0.3](https://github.com/valor-software/ng2-chunk-file-upload/compare/v1.0.2...v1.0.3) (2016-05-12)
@@ -112,17 +112,17 @@
### Bug Fixes ### Bug Fixes
* **upload:** merge fix and get filters fix ([ef6091c](https://github.com/valor-software/ng2-file-upload/commit/ef6091c)) * **upload:** merge fix and get filters fix ([ef6091c](https://github.com/valor-software/ng2-chunk-file-upload/commit/ef6091c))
### Chores ### Chores
* **build:** ng2 style guide applied ([aee69d8](https://github.com/valor-software/ng2-file-upload/commit/aee69d8)) * **build:** ng2 style guide applied ([aee69d8](https://github.com/valor-software/ng2-chunk-file-upload/commit/aee69d8))
### Features ### Features
* **package:** upgrade to angular 2.0.0-rc.1 ([#176](https://github.com/valor-software/ng2-file-upload/issues/176)) ([13c5c35](https://github.com/valor-software/ng2-file-upload/commit/13c5c35)), closes [#180](https://github.com/valor-software/ng2-file-upload/issues/180) * **package:** upgrade to angular 2.0.0-rc.1 ([#176](https://github.com/valor-software/ng2-chunk-file-upload/issues/176)) ([13c5c35](https://github.com/valor-software/ng2-chunk-file-upload/commit/13c5c35)), closes [#180](https://github.com/valor-software/ng2-chunk-file-upload/issues/180)
### BREAKING CHANGES ### BREAKING CHANGES

42
README.md
View File

@@ -1,31 +1,31 @@
# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com) # ng2-chunk-file-upload [![npm version](https://badge.fury.io/js/ng2-chunk-file-upload.svg)](http://badge.fury.io/js/ng2-chunk-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-chunk-file-upload.svg)](https://npmjs.org/ng2-chunk-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com)
Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/)) Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-chunk-file-upload/))
[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide) [![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)
[![Build Status](https://travis-ci.org/valor-software/ng2-file-upload.svg?branch=development)](https://travis-ci.org/valor-software/ng2-file-upload) [![Build Status](https://travis-ci.org/valor-software/ng2-chunk-file-upload.svg?branch=development)](https://travis-ci.org/valor-software/ng2-chunk-file-upload)
[![Dependency Status](https://david-dm.org/valor-software/ng2-file-upload.svg)](https://david-dm.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)
## Quick start ## Quick start
1. A recommended way to install ***ng2-file-upload*** is through [npm](https://www.npmjs.com/search?q=ng2-file-upload) package manager using the following command: 1. A recommended way to install ***ng2-chunk-file-upload*** is through [npm](https://www.npmjs.com/search?q=ng2-chunk-file-upload) package manager using the following command:
`npm i ng2-file-upload --save` `npm i ng2-chunk-file-upload --save`
Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-file-upload/archive/master.zip). Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-chunk-file-upload/archive/master.zip).
2. Currently `ng2-file-upload` contains two directives: `ng2-file-select` and `ng2-file-drop`. `ng2-file-select` is used for 'file-input' field of form and 2. Currently `ng2-chunk-file-upload` contains two directives: `ng2-file-select` and `ng2-file-drop`. `ng2-file-select` is used for 'file-input' field of form and
`ng2-file-drop` is used for area that will be used for dropping of file or files. `ng2-file-drop` is used for area that will be used for dropping of file or files.
3. More information regarding using of ***ng2-file-upload*** is located in 3. More information regarding using of ***ng2-chunk-file-upload*** is located in
[demo](http://valor-software.github.io/ng2-file-upload/) and [demo sources](https://github.com/valor-software/ng2-file-upload/tree/master/demo). [demo](http://valor-software.github.io/ng2-chunk-file-upload/) and [demo sources](https://github.com/valor-software/ng2-chunk-file-upload/tree/master/demo).
## Using ***ng2-file-upload*** in a project ## Using ***ng2-chunk-file-upload*** in a project
1. Install as shown in the above section. 1. Install as shown in the above section.
2. Import `FileUploadModule` into the module that declares the component using ***ng2-file-upload***: 2. Import `FileUploadModule` into the module that declares the component using ***ng2-chunk-file-upload***:
```import { FileUploadModule } from 'ng2-file-upload';``` ```import { FileUploadModule } from 'ng2-chunk-file-upload';```
3. Add it to `[imports]` under `@NgModule`: 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-file-upload';``` ```import { FileUploader } from 'ng2-chunk-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-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
### Events ### 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-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
Parameters supported by this object: Parameters supported by this object:
@@ -76,15 +76,15 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g
### 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-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and See using in [ts demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
[html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html) [html demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
- `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"` - `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-file-upload/issues) board to report bugs and feature requests (not our email address) 1. Use [GitHub Issues](https://github.com/valor-software/ng2-chunk-file-upload/issues) board to report bugs and feature requests (not our email address)
2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it. 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!
@@ -106,7 +106,7 @@ Thanks for understanding!
### Code snippet on how to use the Chunk File Feature on your code ### Code snippet on how to use the Chunk File Feature on your code
```typescript ```typescript
... ...
import { FileUploader } from 'ng2-file-upload'; import { FileUploader } from 'ng2-chunk-file-upload';
... ...
export class SimpleDemoComponent { export class SimpleDemoComponent {
... ...
@@ -152,4 +152,4 @@ Thanks for understanding!
### License ### License
The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-file-upload/blob/master/LICENSE) file for the full text) The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/LICENSE) file for the full text)

72
demo/src/app/app.component.ts
View File

@@ -3,41 +3,49 @@ 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-file-upload</h1> <h1>ng2-chunk-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-file-upload">View on GitHub</a> <a class="btn btn-primary" href="https://github.com/valor-software/ng2-chunk-file-upload">View on GitHub</a>
<div class="row"> <div class="row">
<div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div> <div class="col-lg-1">
<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> <iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-chunk-file-upload&type=star&count=true"
</div> frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</div> </div>
</main> <div class="col-lg-1">
<iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-chunk-file-upload&type=fork&count=true"
frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</div>
</div>
</div>
</main>
<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"><a href="https://github.com/valor-software/ng2-file-upload">ng2-file-upload</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p> <p class="text-muted text-center">
</div> <a href="https://github.com/valor-software/ng2-chunk-file-upload">ng2-chunk-file-upload</a>
</footer> is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p>
` </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);
} }
} }

17
demo/src/app/app.module.ts
View File

@@ -4,16 +4,21 @@ 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 'ng2-file-upload'; import { FileUploadModule } from 'ng2-chunk-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';
@NgModule({ @NgModule({
imports: [BrowserModule, CommonModule, FileUploadModule, TabsModule.forRoot(), FormsModule], imports: [
declarations: [AppComponent, FileUploadSectionComponent, SimpleDemoComponent], BrowserModule,
bootstrap: [AppComponent] CommonModule,
FileUploadModule,
TabsModule.forRoot(),
FormsModule,
],
declarations: [AppComponent, FileUploadSectionComponent, SimpleDemoComponent],
bootstrap: [AppComponent],
}) })
export class AppModule { export class AppModule {}
}

28
demo/src/app/components/file-upload-section.ts
View File

@@ -1,27 +1,27 @@
import { Component } from '@angular/core'; 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;
} }

2
demo/src/app/components/file-upload/simple-demo.ts
View File

@@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload'; import { FileUploader } from 'ng2-chunk-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/';

10
demo/src/doc.md
View File

@@ -1,6 +1,6 @@
### Usage ### Usage
```typescript ```typescript
import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload'; import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-chunk-file-upload/ng2-chunk-file-upload';
``` ```
### Annotations ### Annotations
@@ -18,7 +18,7 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u
### Properties ### Properties
- `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
Parameters supported by this object: Parameters supported by this object:
@@ -37,11 +37,11 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u
### Properties ### Properties
- `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
### Events ### 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-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and See using in [ts demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
[html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html) [html demo](https://github.com/valor-software/ng2-chunk-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
- `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"` - `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)"`

2
demo/src/getting-started.md
View File

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

2
demo/src/index.html
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-file-upload/graphs/contributors"> <link rel="author" href="https://github.com/valor-software/ng2-chunk-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">

16778
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

23
package.json
View File

@@ -1,8 +1,8 @@
{ {
"name": "ng2-file-upload-base", "name": "ng2-chunk-file-upload-base",
"version": "1.3.0", "version": "1.3.0",
"private": true, "private": true,
"description": "Angular file upload directives", "description": "Angular file upload directives with Chunk Upload",
"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-file-upload.umd.js", "main": "bundles/ng2-chunk-file-upload.umd.js",
"module": "index.js", "module": "index.js",
"typings": "index.d.ts", "typings": "index.d.ts",
"keywords": [ "keywords": [
@@ -31,18 +31,20 @@
"angularjs", "angularjs",
"twitter-bootstrap", "twitter-bootstrap",
"file-upload", "file-upload",
"angular-file-upload" "angular-file-upload",
"chunk-file-upload",
"azure-blob-storage"
], ],
"author": "Vyacheslav Chub <vyacheslav.chub@valor-software.com>", "author": "Paulo Peres Jr <paulo@myog.io>",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+ssh://git@github.com/valor-software/ng2-file-upload.git" "url": "git+ssh://git@github.com/PauloPeres/ng2-chunk-file-upload.git"
}, },
"bugs": { "bugs": {
"url": "https://github.com/valor-software/ng2-file-upload/issues" "url": "https://github.com/PauloPeres/ng2-chunk-file-upload/issues"
}, },
"homepage": "https://github.com/valor-software/ng2-file-upload#readme", "homepage": "https://github.com/PauloPeres/ng2-chunk-file-upload#readme",
"dependencies": {}, "dependencies": {},
"peerDependencies": { "peerDependencies": {
"@angular/common": "^2.3.1 || >=4.0.0", "@angular/common": "^2.3.1 || >=4.0.0",
@@ -135,6 +137,11 @@
"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/"
} }
] ]
} }

466
src/file-upload/file-chunk.class.ts
View File

@@ -1,238 +1,238 @@
export class FileChunk { export class FileChunk {
public stepSize: number = 1024 * 1024 * 3; public stepSize: number = 1024 * 1024 * 3;
public rawFile: any = null; public rawFile: any = null;
public uploadProgress: number = null; public uploadProgress: number = null;
public uploading: boolean = null; public uploading: boolean = null;
public uploadComplete: boolean = null; public uploadComplete: boolean = null;
public byteStepSize: number = null; public byteStepSize: number = null;
public totalSize: number = null; public totalSize: number = null;
public startByte: number = null; public startByte: number = null;
public endByte: number = null; public endByte: number = null;
public currentChunk: number = 0; public currentChunk: number = 0;
public totalChunks: number = null; public totalChunks: number = null;
public uniqueIdentifier: string = null; public uniqueIdentifier: string = null;
public totalSent: number = null; public totalSent: number = null;
public extraData: any = {}; public extraData: any = {};
constructor(rawFile: any, options: any = {}) { constructor(rawFile: any, options: any = {}) {
this.setByteStepSize(this.stepSize); this.setByteStepSize(this.stepSize);
if (typeof options !== 'undefined') { if (typeof options !== 'undefined') {
if (typeof options.byteStepSize !== 'undefined') { if (typeof options.byteStepSize !== 'undefined') {
this.setByteStepSize(options.byteStepSize); this.setByteStepSize(options.byteStepSize);
} }
} }
this.setRawFile(rawFile); this.setRawFile(rawFile);
this.setRawFile(rawFile); this.setRawFile(rawFile);
this.setUploadProgress(0); this.setUploadProgress(0);
this.setUploading(false); this.setUploading(false);
this.setUploadComplete(false); this.setUploadComplete(false);
this.setTotalSize(this.getRawFile().size); this.setTotalSize(this.getRawFile().size);
this.setStartByte(0); this.setStartByte(0);
this.setEndByte(this.getByteStepSize()); this.setEndByte(this.getByteStepSize());
this.setCurrentChunk(0); this.setCurrentChunk(0);
if (!this.getBrowserSliceMethod()) { if (!this.getBrowserSliceMethod()) {
this.setTotalChunks(1); this.setTotalChunks(1);
} else { } else {
this.setTotalChunks(Math.ceil(this.totalSize / this.byteStepSize)); this.setTotalChunks(Math.ceil(this.totalSize / this.byteStepSize));
} }
this.setUniqueIdenfier(this.generateUniqueIdentifier()); this.setUniqueIdenfier(this.generateUniqueIdentifier());
this.setTotalSent(0); this.setTotalSent(0);
} }
public setExtraData(index: any, value: any) { public setExtraData(index: any, value: any) {
this.extraData[index] = value; this.extraData[index] = value;
} }
public getExtraData(index: any) { public getExtraData(index: any) {
return this.extraData[index]; return this.extraData[index];
} }
//getters and setters //getters and setters
public setProgress(v: any) { public setProgress(v: number) {
this.uploadProgress = v; this.uploadProgress = v;
} }
public getProgress() { public getProgress():number {
return this.uploadProgress; return this.uploadProgress;
} }
public setUploading(v: boolean) { public setUploading(v: boolean) {
this.uploading = v; this.uploading = v;
} }
public getUploading() { public getUploading():boolean {
return this.uploading; return this.uploading;
} }
public getUploadComplete() { public getUploadComplete():boolean {
return this.uploadComplete; return this.uploadComplete;
} }
public setUploadComplete(v: boolean) { public setUploadComplete(v: boolean) {
this.uploadComplete = v; this.uploadComplete = v;
} }
public setUploadProgress(v: number) { public setUploadProgress(v: number) {
this.uploadProgress = v; this.uploadProgress = v;
} }
public getUploadProgress() { public getUploadProgress():number {
return this.uploadProgress; return this.uploadProgress;
} }
public getStartByte() { public getStartByte():number {
return this.startByte; return this.startByte;
} }
public setStartByte(v: number) { public setStartByte(v: number) {
this.startByte = v; this.startByte = v;
} }
public getEndByte() { public getEndByte():number {
return this.endByte; return this.endByte;
} }
public setEndByte(v: number) { public setEndByte(v: number) {
this.endByte = v; this.endByte = v;
} }
public getByteStepSize() { public getByteStepSize():number {
return this.byteStepSize; return this.byteStepSize;
} }
public setByteStepSize(v: number) { public setByteStepSize(v: number) {
this.byteStepSize = v; this.byteStepSize = v;
} }
public setTotalSize(v: number) { public setTotalSize(v: number) {
this.totalSize = v; this.totalSize = v;
} }
public getTotalSize() { public getTotalSize():number {
return this.totalSize; return this.totalSize;
} }
public getRawFile() { public getRawFile():any {
return this.rawFile; return this.rawFile;
} }
public setRawFile(v: File) { public setRawFile(v: File) {
this.rawFile = v; this.rawFile = v;
} }
public getCurrentChunk() { public getCurrentChunk():number {
return this.currentChunk; return this.currentChunk;
} }
public setCurrentChunk(v: number) { public setCurrentChunk(v: number) {
this.currentChunk = v; this.currentChunk = v;
} }
public getTotalChunks() { public getTotalChunks():number {
return this.totalChunks; return this.totalChunks;
} }
public setTotalChunks(v: number) { public setTotalChunks(v: number) {
this.totalChunks = v; this.totalChunks = v;
} }
public setUniqueIdenfier(v: string) { public setUniqueIdenfier(v: string) {
this.uniqueIdentifier = v; this.uniqueIdentifier = v;
} }
public getUniqueIdenfier() { public getUniqueIdenfier():string {
return this.uniqueIdentifier; return this.uniqueIdentifier;
} }
public getRawFileExtension() { public getRawFileExtension() {
const extension = this.getRawFileName().split('.'); const extension = this.getRawFileName().split('.');
return extension[extension.length - 1]; return extension[extension.length - 1];
} }
public getRawFileName() { public getRawFileName() {
return this.getRawFile().name; return this.getRawFile().name;
} }
public getContentType() { public getContentType() {
return this.getRawFile().type; return this.getRawFile().type;
} }
public getTotalSent() { public getTotalSent() {
return this.totalSent; return this.totalSent;
} }
public setTotalSent(v: number) { public setTotalSent(v: number) {
this.totalSent = v; this.totalSent = v;
} }
public getCurrentRawFileChunk() { public getCurrentRawFileChunk() {
if (!this.getBrowserSliceMethod()) { if (!this.getBrowserSliceMethod()) {
return this.getRawFile(); return this.getRawFile();
} }
else { else {
return this.getRawFile()[this.getBrowserSliceMethod()](this.getStartByte(), this.getEndByte()); return this.getRawFile()[this.getBrowserSliceMethod()](this.getStartByte(), this.getEndByte());
} }
} }
public retrocedeChunk() { public retrocedeChunk() {
if (!this.getBrowserSliceMethod()) { if (!this.getBrowserSliceMethod()) {
return false; return false;
} }
this.setEndByte(this.getStartByte()); this.setEndByte(this.getStartByte());
this.setStartByte(this.getStartByte() - this.getByteStepSize()); this.setStartByte(this.getStartByte() - this.getByteStepSize());
this.setCurrentChunk(this.getCurrentChunk() - 1); this.setCurrentChunk(this.getCurrentChunk() - 1);
if (this.getTotalSent() != 0) { if (this.getTotalSent() != 0) {
this.setTotalSent(this.getTotalSent() - this.getByteStepSize()); this.setTotalSent(this.getTotalSent() - this.getByteStepSize());
} }
} }
public prepareNextChunk() { public prepareNextChunk() {
if (!this.getBrowserSliceMethod()) { if (!this.getBrowserSliceMethod()) {
return false; return false;
} }
if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() < this.getTotalChunks()) { // finished if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() < this.getTotalChunks()) { // finished
return false; return false;
} }
this.setStartByte(this.getEndByte()); this.setStartByte(this.getEndByte());
this.setEndByte(this.getEndByte() + this.getByteStepSize()); this.setEndByte(this.getEndByte() + this.getByteStepSize());
this.setCurrentChunk(this.getCurrentChunk() + 1); this.setCurrentChunk(this.getCurrentChunk() + 1);
if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() === this.getTotalChunks()) { if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() === this.getTotalChunks()) {
// something went wrong with the calculations // something went wrong with the calculations
this.setEndByte(this.getTotalSize()); this.setEndByte(this.getTotalSize());
} }
return true; return true;
} }
public getBrowserSliceMethod(): string { public getBrowserSliceMethod(): string {
if (this.rawFile && typeof this.rawFile !== 'undefined') { if (this.rawFile && typeof this.rawFile !== 'undefined') {
if (this.rawFile.slice && typeof this.rawFile.slice === 'function') { if (this.rawFile.slice && typeof this.rawFile.slice === 'function') {
return 'slice'; return 'slice';
} }
else if (this.rawFile.mozSlice && typeof this.rawFile.mozSlice === 'function') { else if (this.rawFile.mozSlice && typeof this.rawFile.mozSlice === 'function') {
return 'mozSlice'; return 'mozSlice';
} }
else if (this.rawFile.webkitSlice && typeof this.rawFile.webkitSlice === 'function') { else if (this.rawFile.webkitSlice && typeof this.rawFile.webkitSlice === 'function') {
return 'webkitSlice'; return 'webkitSlice';
} }
} }
else { else {
return null; return null;
} }
}//getBrowserSliceMethod() ends here }//getBrowserSliceMethod() ends here
public generateUniqueIdentifier(): string{ public generateUniqueIdentifier(): string {
let d = new Date().getTime(); let d = new Date().getTime();
if (typeof performance !== 'undefined' && typeof performance.now === 'function'){ if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
d += performance.now(); // use high-precision timer if available d += performance.now(); // use high-precision timer if available
} }
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = (d + Math.random() * 16) % 16 | 0; const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16); d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
}); });
} }
} }

130
src/file-upload/file-drop.directive.ts
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;
} }
} }
} }

413
src/file-upload/file-item.class.ts
View File

@@ -1,217 +1,210 @@
import { HttpHeaders } from '@angular/common/http';
import { FileLikeObject } from './file-like-object.class'; import { FileLikeObject } from './file-like-object.class';
import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class'; import { FileUploader, FileUploaderOptions } from './file-uploader.class';
import { FileChunk } from './file-chunk.class' 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 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 _chunkUploaders: any = []; public _form: any;
public _fileChunks: FileChunk; public _fileChunks: FileChunk;
public _currentChunk: number = 0;
public _totalChunks: number = 0; protected chunkTotalRetries = 10;
protected chunkRetries = 0;
protected uploader: FileUploader;
protected some: File;
protected options: FileUploaderOptions;
protected chunkTotalRetries = 10; public constructor(uploader: FileUploader, some: File, options: FileUploaderOptions) {
protected chunkRetries = 0; this.uploader = uploader;
protected uploader: FileUploader; this.some = some;
protected some: File; this.options = options;
protected options: FileUploaderOptions; this.file = new FileLikeObject(some);
this._file = some;
public constructor(uploader: FileUploader, some: File, options: FileUploaderOptions) { if (uploader.options) {
this.uploader = uploader; this.method = uploader.options.method || 'POST';
this.some = some; this.alias = uploader.options.itemAlias || 'file';
this.options = options; }
this.file = new FileLikeObject(some); this.url = uploader.options.url;
this._file = some; }
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 (uploader.options) { if (this.uploader.options.removeAfterUpload) {
this.method = uploader.options.method || 'POST'; this.remove();
this.alias = uploader.options.itemAlias || 'file'; }
} }
this.url = uploader.options.url; public _onCompleteChunk(response: string, status: number, headers: HttpHeaders): void {
} this.chunkRetries = 0;
this._onCompleteChunkCallNext();
public upload(): void { this.onCompleteChunk(response, status, headers);
try { }
this.uploader.uploadItem(this); public _onCompleteChunkCallNext(): void {
} catch (e) { this.uploader.uploaderService.uploadFile(this,this.uploader.options);
this.uploader._onCompleteItem(this, '', 0, {}); this.prepareNextChunk()
this.uploader._onErrorItem(this, '', 0, {}); }
} public _onErrorChunk(response: string, status: number, headers: HttpHeaders): void {
} if (this.chunkRetries > this.chunkTotalRetries) {
public createFileChunk(chunkSize: number): void{ this.uploader.onErrorItem(this, response, status, headers);
this.fileChunks = new FileChunk(this._file,{byteStepSize:chunkSize}); this.uploader.onCompleteItem(this, response, status, headers);
this._currentChunk = this.fileChunks.currentChunk; } else {
this._totalChunks = this.fileChunks.totalChunks; this.chunkRetries++;
} this.fileChunks.retrocedeChunk();
public getCurrentChunkFile():any{ this._onCompleteChunkCallNext();
return this.fileChunks.getCurrentRawFileChunk(); }
} }
public prepareNextChunk():void{ public _prepareToUploading(): void {
this.fileChunks.prepareNextChunk(); this.index = this.index || ++this.uploader._nextIndex;
} this.isReady = true;
public getCurrentChunk():any{ }
return this.fileChunks.getCurrentChunk()
}
public getTotalChunks():any{
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 onBeforeUpload(): void {
return void 0;
}
public onBuildForm(form: any): any {
return { form };
}
public onProgress(progress: number): any {
return { progress };
}
public onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any {
return { response, status, headers };
}
public onError(response: string, status: number, headers: ParsedResponseHeaders): any {
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 onCompleteChunk(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 _onCompleteChunk(response: string, status: number, headers: ParsedResponseHeaders): void {
this.chunkRetries = 0;
this._onCompleteChunkCallNext();
this.onCompleteChunk(response, status, headers);
}
public _onCompleteChunkCallNext(): void{
//Let's Retry to send this chunk 4 times;
}
public _onErrorChunk(response: string, status: number, headers: ParsedResponseHeaders): void {
if (this.chunkRetries > this.chunkTotalRetries) {
this.uploader.onErrorItem(this, response, status, headers);
this.uploader.onCompleteItem(this, response, status, headers);
} else {
this.chunkRetries ++;
this.fileChunks.retrocedeChunk();
this._onCompleteChunkCallNext();
}
}
public _prepareToUploading(): void {
this.index = this.index || ++this.uploader._nextIndex;
this.isReady = true;
}
} }

50
src/file-upload/file-like-object.class.ts
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;
} }
} }

52
src/file-upload/file-select.directive.ts
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 = '';
} }
} }
} }

310
src/file-upload/file-type.class.ts
View File

@@ -1,164 +1,164 @@
import { FileLikeObject } from "../ng2-file-upload"; import { FileLikeObject } from "../ng2-chunk-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];
} }
} }
} }

6
src/file-upload/file-upload.module.ts
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 {
} }

946
src/file-upload/file-uploader.class.ts
View File

File diff suppressed because it is too large Load Diff

336
src/file-upload/file-uploader.service.ts Normal file
View File

@@ -0,0 +1,336 @@
import { map } from 'rxjs/operators/map';
import { Observable } from 'rxjs';
import { FileUploaderOptions, FileUploader } from './file-uploader.class';
import { FileItem } from './file-item.class';
import { HttpClient, HttpRequest, HttpEventType, HttpEvent, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tap, last, catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
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 = {};
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);
let request = new HttpRequest(request_method, link, data, {
headers: new HttpHeaders(headers),
reportProgress: true,
withCredentials: item.withCredentials,
});
this.uploadSubscription = this.http.request(request).subscribe(
(event) => {
this.getEventMessage(event, item);
},
(error) => {
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).map(
(response: Response) => {
return response;
}
)
}
else{
return Observable.of(false);
}
}else{
return Observable.of(false);
}
}
protected delete(url: string, options = {}): Observable<any> {
return new Observable(
(observe) => {
this._getDefaultHeaders().then(
function(headers){
return this.http.delete(url, {headers: new HttpHeaders(headers) }).subscribe(
(response: Response) => {
observe.next(response);
},
(error) => {
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){
return this.http.get(url, {headers: new HttpHeaders(headers) }).subscribe(
(response: Response) => {
observe.next(response);
},
(error) => {
observe.error(error);
}
);
}.bind(this),
(error) => {
observe.error(error);
});
}
)
}
public addHeader(name=null, value=null){
this.additionalHeaders[name] = value
}
public removeHeader(name=null){
if(this.additionalHeaders.hasOwnProperty(name)){
delete(this.additionalHeaders[name])
}
}
}

1
src/index.ts
View File

@@ -3,5 +3,6 @@ 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';

0
src/ng2-file-upload.ts → src/ng2-chunk-file-upload.ts
View File

2
src/package.json
View File

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

2
src/tsconfig.json
View File

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

24
tsconfig.json Normal file
View File

@@ -0,0 +1,24 @@
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"plugins": [
{
"name": "tslint-language-service"
}
]
}
}

147
tslint.json
View File

@@ -1,12 +1,137 @@
{ {
"extends": "tslint-config-valorsoft", "rulesDirectory": [
"rulesDirectory": "./node_modules/codelyzer", "node_modules/codelyzer"
"rules": { ],
"no-forward-ref": false, "rules": {
"no-null-keyword": false, "trailing-comma": [
"only-arrow-functions": false, true,
"no-access-missing-member": false, {
"directive-selector": false, "multiline": "always",
"component-selector": false "singleline": "never"
} }
} ],
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs"
],
"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
}
}