diff --git a/README.md b/README.md index c4ced13..8914ec2 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,11 @@ Follow me [![twitter](https://img.shields.io/twitter/follow/valorkin.svg?style=s - `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 that supported by this object: + Parameters supported by this object: 1. `url` - URL of File Uploader's route 2. `authToken` - Auth token that will be applied as 'Authorization' header during file send. + 3. `disableMultipart` - If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false. ### Events diff --git a/components/file-upload/file-drop.directive.ts b/components/file-upload/file-drop.directive.ts index 28225eb..a918adf 100644 --- a/components/file-upload/file-drop.directive.ts +++ b/components/file-upload/file-drop.directive.ts @@ -6,7 +6,7 @@ import { FileUploader } from './file-uploader.class'; export class FileDropDirective { @Input() public uploader:FileUploader; @Output() public fileOver:EventEmitter = new EventEmitter(); - @Output() public onFileDrop:EventEmitter = new EventEmitter(); + @Output() public onFileDrop:EventEmitter = new EventEmitter(); private element:ElementRef; public constructor(element:ElementRef) { diff --git a/components/file-upload/file-item.class.ts b/components/file-upload/file-item.class.ts index d8db025..7f59e16 100644 --- a/components/file-upload/file-item.class.ts +++ b/components/file-upload/file-item.class.ts @@ -1,7 +1,5 @@ -import {NgZone} from '@angular/core'; - import {FileLikeObject} from './file-like-object.class'; -import {FileUploader} from './file-uploader.class'; +import {FileUploader, ParsedResponseHeaders, FileUploaderOptions} from './file-uploader.class'; export class FileItem { public file:FileLikeObject; @@ -20,28 +18,31 @@ export class FileItem { public isError:boolean = false; public progress:number = 0; public index:number = void 0; - private _zone:NgZone; + public _xhr:XMLHttpRequest; + public _form:any; private uploader:FileUploader; - private some:any; - private options:any; + private some:File; + private options:FileUploaderOptions; - public constructor(uploader:FileUploader, some:any, options:any) { + public constructor(uploader:FileUploader, some:File, options:FileUploaderOptions) { this.uploader = uploader; this.some = some; this.options = options; this.file = new FileLikeObject(some); this._file = some; + if (uploader.options && uploader.options.method) { + this.method = uploader.options.method; + } this.url = uploader.options.url; - this._zone = new NgZone({ enableLongStackTrace: false }); } public upload():void { try { this.uploader.uploadItem(this); } catch (e) { - this.uploader._onCompleteItem(this, '', 0, []); - this.uploader._onErrorItem(this, '', 0, []); + this.uploader._onCompleteItem(this, '', 0, {}); + this.uploader._onErrorItem(this, '', 0, {}); } } @@ -65,19 +66,19 @@ export class FileItem { return {progress}; } - public onSuccess(response:any, status:any, headers:any):any { + public onSuccess(response:string, status:number, headers:ParsedResponseHeaders):any { return {response,status,headers}; } - public onError(response:any, status:any, headers:any):any { + public onError(response:string, status:number, headers:ParsedResponseHeaders):any { return {response,status,headers}; } - public onCancel(response:any, status:any, headers:any):any { + public onCancel(response:string, status:number, headers:ParsedResponseHeaders):any { return {response,status,headers}; } - public onComplete(response:any, status:any, headers:any):any { + public onComplete(response:string, status:number, headers:ParsedResponseHeaders):any { return {response,status,headers}; } @@ -97,13 +98,11 @@ export class FileItem { } public _onProgress(progress:number):void { - this._zone.run(() => { - this.progress = progress; - }); + this.progress = progress; this.onProgress(progress); } - public _onSuccess(response:any, status:any, headers:any):void { + public _onSuccess(response:string, status:number, headers:ParsedResponseHeaders):void { this.isReady = false; this.isUploading = false; this.isUploaded = true; @@ -115,7 +114,7 @@ export class FileItem { this.onSuccess(response, status, headers); } - public _onError(response:any, status:any, headers:any):void { + public _onError(response:string, status:number, headers:ParsedResponseHeaders):void { this.isReady = false; this.isUploading = false; this.isUploaded = true; @@ -127,7 +126,7 @@ export class FileItem { this.onError(response, status, headers); } - public _onCancel(response:any, status:any, headers:any):void { + public _onCancel(response:string, status:number, headers:ParsedResponseHeaders):void { this.isReady = false; this.isUploading = false; this.isUploaded = false; @@ -139,7 +138,7 @@ export class FileItem { this.onCancel(response, status, headers); } - public _onComplete(response:any, status:any, headers:any):void { + public _onComplete(response:string, status:number, headers:ParsedResponseHeaders):void { this.onComplete(response, status, headers); if (this.uploader.options.removeAfterUpload) { diff --git a/components/file-upload/file-uploader.class.ts b/components/file-upload/file-uploader.class.ts index b014b2d..88df666 100644 --- a/components/file-upload/file-uploader.class.ts +++ b/components/file-upload/file-uploader.class.ts @@ -11,24 +11,31 @@ export interface Headers { value:string; } +export type ParsedResponseHeaders = {[headerFieldName:string]:string}; + +export type FilterFunction = {name:string, fn:(item?:FileLikeObject, options?:FileUploaderOptions)=>boolean}; + export interface FileUploaderOptions { allowedMimeType?:Array; allowedFileType?:Array; autoUpload?:boolean; isHTML5?:boolean; - filters?:Array; + filters?:Array; headers?:Array; + method?:string; + authToken?:string; maxFileSize?:number; queueLimit?:number; removeAfterUpload?:boolean; url?:string; + disableMultipart?:boolean; } export class FileUploader { public authToken:string; public isUploading:boolean = false; - public queue:Array = []; + public queue:Array = []; public progress:number = 0; public _nextIndex:number = 0; public autoUpload:any; @@ -37,16 +44,17 @@ export class FileUploader { autoUpload: false, isHTML5: true, filters: [], - removeAfterUpload: false + removeAfterUpload: false, + disableMultipart: false }; private _failFilterIndex:number; - public constructor(options:any) { + public constructor(options:FileUploaderOptions) { this.setOptions(options); } - public setOptions(options:any):void { + public setOptions(options:FileUploaderOptions):void { this.options = Object.assign(this.options, options); this.authToken = options.authToken; @@ -68,15 +76,15 @@ export class FileUploader { // this.options.filters.unshift({name: 'folder', fn: this._folderFilter}); } - public addToQueue(files:any[], options?:any, filters?:any):void { - let list:any[] = []; + public addToQueue(files:File[], options?:FileUploaderOptions, filters?:FilterFunction[]|string):void { + let list:File[] = []; for (let file of files) { list.push(file); } let arrayOfFilters = this._getFilters(filters); let count = this.queue.length; - let addedFileItems:any[] = []; - list.map((some:any) => { + let addedFileItems:FileItem[] = []; + list.map((some:File) => { if (!options) { options = this.options; } @@ -102,7 +110,7 @@ export class FileUploader { } } - public removeFromQueue(value:any):void { + public removeFromQueue(value:FileItem):void { let index = this.getIndexOfItem(value); let item = this.queue[index]; if (item.isUploading) { @@ -131,27 +139,27 @@ export class FileUploader { (this as any)[transport](item); } - public cancelItem(value:any):void { + public cancelItem(value:FileItem):void { let index = this.getIndexOfItem(value); let item = this.queue[index]; - let prop = this.options.isHTML5 ? '_xhr' : '_form'; + let prop = this.options.isHTML5 ? item._xhr : item._form; if (item && item.isUploading) { - item[prop].abort(); + prop.abort(); } } public uploadAll():void { - let items = this.getNotUploadedItems().filter((item:any) => !item.isUploading); + let items = this.getNotUploadedItems().filter((item:FileItem) => !item.isUploading); if (!items.length) { return; } - items.map((item:any) => item._prepareToUploading()); + items.map((item:FileItem) => item._prepareToUploading()); items[0].upload(); } public cancelAll():void { let items = this.getNotUploadedItems(); - items.map((item:any) => item.cancel()); + items.map((item:FileItem) => item.cancel()); } public isFile(value:any):boolean { @@ -167,12 +175,12 @@ export class FileUploader { } public getNotUploadedItems():Array { - return this.queue.filter((item:any) => !item.isUploaded); + return this.queue.filter((item:FileItem) => !item.isUploaded); } public getReadyItems():Array { return this.queue - .filter((item:any) => (item.isReady && !item.isUploading)) + .filter((item:FileItem) => (item.isReady && !item.isUploading)) .sort((item1:any, item2:any) => item1.index - item2.index); } @@ -189,23 +197,23 @@ export class FileUploader { return {fileItems}; } - public onBuildItemForm(fileItem:any, form:any):any { + public onBuildItemForm(fileItem:FileItem, form:any):any { return {fileItem, form}; } - public onAfterAddingFile(fileItem:any):any { + public onAfterAddingFile(fileItem:FileItem):any { return {fileItem}; } - public onWhenAddingFileFailed(item:any, filter:any, options:any):any { + public onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):any { return {item, filter, options}; } - public onBeforeUploadItem(fileItem:any):any { + public onBeforeUploadItem(fileItem:FileItem):any { return {fileItem}; } - public onProgressItem(fileItem:any, progress:any):any { + public onProgressItem(fileItem:FileItem, progress:any):any { return {fileItem, progress}; } @@ -213,19 +221,19 @@ export class FileUploader { return {progress}; } - public onSuccessItem(item:any, response:any, status:any, headers:any):any { + public onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { return {item, response, status, headers}; } - public onErrorItem(item:any, response:any, status:any, headers:any):any { + public onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { return {item, response, status, headers}; } - public onCancelItem(item:any, response:any, status:any, headers:any):any { + public onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { return {item, response, status, headers}; } - public onCompleteItem(item:any, response:any, status:any, headers:any):any { + public onCompleteItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { return {item, response, status, headers}; } @@ -233,25 +241,25 @@ export class FileUploader { return void 0; } - public _mimeTypeFilter(item:any):boolean { + public _mimeTypeFilter(item:FileLikeObject):boolean { return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1); } - public _fileSizeFilter(item:any):boolean { + public _fileSizeFilter(item:FileLikeObject):boolean { return !(this.options.maxFileSize && item.size > this.options.maxFileSize); } - public _fileTypeFilter(item:any):boolean { + public _fileTypeFilter(item:FileLikeObject):boolean { return !(this.options.allowedFileType && this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1); } - public _onErrorItem(item:any, response:any, status:any, headers:any):void { + public _onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void { item._onError(response, status, headers); this.onErrorItem(item, response, status, headers); } - public _onCompleteItem(item:any, response:any, status:any, headers:any):void { + public _onCompleteItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void { item._onComplete(response, status, headers); this.onCompleteItem(item, response, status, headers); let nextItem = this.getReadyItems()[0]; @@ -265,8 +273,8 @@ export class FileUploader { this._render(); } - protected _headersGetter(parsedHeaders:any):any { - return (name:any) => { + protected _headersGetter(parsedHeaders:ParsedResponseHeaders):any { + return (name:any):any => { if (name) { return parsedHeaders[name.toLowerCase()] || void 0; } @@ -274,9 +282,9 @@ export class FileUploader { }; } - protected _xhrTransport(item:any):any { + protected _xhrTransport(item:FileItem):any { let xhr = item._xhr = new XMLHttpRequest(); - let form = new FormData(); + let sendable:any; this._onBeforeUploadItem(item); // todo /*item.formData.map(obj => { @@ -287,9 +295,15 @@ export class FileUploader { if (typeof item._file.size !== 'number') { throw new TypeError('The file specified is no longer valid'); } - this._onBuildItemForm(item, form); + if(!this.options.disableMultipart) { + sendable = new FormData(); + this._onBuildItemForm(item, sendable); + + sendable.append(item.alias, item._file, item.file.name); + } else { + sendable = item._file; + } - form.append(item.alias, item._file, item.file.name); xhr.upload.onprogress = (event:any) => { let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0); this._onProgressItem(item, progress); @@ -328,7 +342,7 @@ export class FileUploader { if (this.authToken) { xhr.setRequestHeader('Authorization', this.authToken); } - xhr.send(form); + xhr.send(sendable); this._render(); } @@ -343,7 +357,7 @@ export class FileUploader { return Math.round(uploaded * ratio + current); } - private _getFilters(filters:any):any { + private _getFilters(filters:FilterFunction[]|string):FilterFunction[] { if (!filters) { return this.options.filters; } @@ -363,7 +377,7 @@ export class FileUploader { // todo: ? } - // private _folderFilter(item:any):boolean { + // private _folderFilter(item:FileItem):boolean { // return !!(item.size || item.type); // } @@ -371,20 +385,20 @@ export class FileUploader { return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit; } - private _isValidFile(file:any, filters:any, options:any):boolean { + private _isValidFile(file:FileLikeObject, filters:FilterFunction[], options:FileUploaderOptions):boolean { this._failFilterIndex = -1; - return !filters.length ? true : filters.every((filter:any) => { + return !filters.length ? true : filters.every((filter:FilterFunction) => { this._failFilterIndex++; return filter.fn.call(this, file, options); }); } - private _isSuccessCode(status:any):boolean { + private _isSuccessCode(status:number):boolean { return (status >= 200 && status < 300) || status === 304; } /* tslint:disable */ - private _transformResponse(response:any, headers:any):any { + private _transformResponse(response:string, headers:ParsedResponseHeaders):string { // todo: ? /*var headersGetter = this._headersGetter(headers); forEach($http.defaults.transformResponse, (transformFn) => { @@ -394,7 +408,7 @@ export class FileUploader { } /* tslint:enable */ - private _parseHeaders(headers:any):any { + private _parseHeaders(headers:string):ParsedResponseHeaders { let parsed:any = {}; let key:any; let val:any; @@ -413,15 +427,15 @@ export class FileUploader { return parsed; } - /*private _iframeTransport(item:any) { + /*private _iframeTransport(item:FileItem) { // todo: implement it later }*/ - private _onWhenAddingFileFailed(item:any, filter:any, options:any):void { + private _onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):void { this.onWhenAddingFileFailed(item, filter, options); } - private _onAfterAddingFile(item:any):void { + private _onAfterAddingFile(item:FileItem):void { this.onAfterAddingFile(item); } @@ -429,17 +443,17 @@ export class FileUploader { this.onAfterAddingAll(items); } - private _onBeforeUploadItem(item:any):void { + private _onBeforeUploadItem(item:FileItem):void { item._onBeforeUpload(); this.onBeforeUploadItem(item); } - private _onBuildItemForm(item:any, form:any):void { + private _onBuildItemForm(item:FileItem, form:any):void { item._onBuildForm(form); this.onBuildItemForm(item, form); } - private _onProgressItem(item:any, progress:any):void { + private _onProgressItem(item:FileItem, progress:any):void { let total = this._getTotalProgress(progress); this.progress = total; item._onProgress(progress); @@ -449,13 +463,13 @@ export class FileUploader { } /* tslint:disable */ - private _onSuccessItem(item:any, response:any, status:any, headers:any):void { + private _onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void { item._onSuccess(response, status, headers); this.onSuccessItem(item, response, status, headers); } /* tslint:enable */ - private _onCancelItem(item:any, response:any, status:any, headers:any):void { + private _onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void { item._onCancel(response, status, headers); this.onCancelItem(item, response, status, headers); } diff --git a/components/file-upload/readme.md b/components/file-upload/readme.md index 62b9b18..c1f7d2d 100644 --- a/components/file-upload/readme.md +++ b/components/file-upload/readme.md @@ -20,10 +20,11 @@ import {FileSelectDirective, FileDropDirective, FileUploader} from 'ng2-file-upl - `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 that supported by this object: + Parameters supported by this object: 1. `url` - URL of File Uploader's route 2. `authToken` - auth token that will be applied as 'Authorization' header during file send. + 3. `disableMultipart` - If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false. ## FileDrop API diff --git a/package.json b/package.json index 2459e91..b8db312 100644 --- a/package.json +++ b/package.json @@ -63,13 +63,14 @@ "compression-webpack-plugin": "0.3.1", "conventional-changelog-cli": "1.2.0", "conventional-github-releaser": "1.1.2", - "copy-webpack-plugin": "2.1.3", - "cpy-cli": "1.0.0", + "copy-webpack-plugin": "3.0.1", + "cpy-cli": "1.0.1", + "del": "^2.2.0", "del-cli": "0.2.0", "es6-promise": "3.1.2", "es6-shim": "0.35.0", "es7-reflect-metadata": "1.6.0", - "eslint-config-valorsoft": "0.0.11", + "eslint-config-valorsoft": "0.0.15", "exports-loader": "0.6.3", "file-loader": "0.8.5", "gh-pages": "0.11.0", @@ -77,7 +78,7 @@ "gulp-size": "2.1.0", "gulp-tslint": "5.0.0", "html-loader": "0.4.3", - "html-webpack-plugin": "2.16.1", + "html-webpack-plugin": "2.19.0", "istanbul-instrumenter-loader": "0.2.0", "jasmine": "2.4.1", "karma": "0.13.22", @@ -91,7 +92,7 @@ "lite-server": "2.2.0", "markdown-loader": "0.1.7", "marked": "0.3.5", - "ng2-bootstrap": "1.0.16", + "ng2-bootstrap": "1.0.17", "phantomjs-polyfill": "0.0.2", "phantomjs-prebuilt": "2.1.7", "pre-commit": "1.1.3", @@ -102,12 +103,12 @@ "require-dir": "0.3.0", "rxjs": "5.0.0-beta.6", "source-map-loader": "0.1.5", - "systemjs-builder": "0.15.16", + "systemjs-builder": "0.15.19", "ts-loader": "0.8.2", "tslint-config-valorsoft": "1.0.3", "typescript": "1.8.10", "typings": "0.8.1", - "webpack": "1.13.0", + "webpack": "1.13.1", "webpack-dev-server": "1.14.1", "zone.js": "0.6.12" }, diff --git a/tsconfig.json b/tsconfig.json index 69720d0..c02a367 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,9 +12,6 @@ "listFiles": false, "noLib": false }, - "exclude": [ - "node_modules" - ], "files": [ "./typings/browser.d.ts", "./ng2-file-upload.ts"