diff --git a/README.md b/README.md index 8c099d5..36006ae 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,9 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) +### Events + - `onFileSelected` - fires when files are selected and added to the uploader queue + ## API for `ng2FileDrop` ### Properties @@ -39,6 +42,7 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g 4. `itemAlias` - item alias (form name redefenition) 5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called. 6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false. + 7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false. ### Events diff --git a/demo/src/doc.md b/demo/src/doc.md index eacd89a..0466b13 100644 --- a/demo/src/doc.md +++ b/demo/src/doc.md @@ -28,6 +28,10 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u 4. `itemAlias` - item alias (form name redefenition) 5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called. 6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false. + 7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false. + +### Events + - `onFileSelected` - fires when files are selected and added to the uploader queue ## FileDrop API @@ -40,4 +44,4 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u - `fileOver` - it fires during 'over' and 'out' events for Drop Area; returns `boolean`: `true` if file is over Drop Area, `false` in case of out. See using in [ts demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and [html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html) - - `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)"` \ No newline at end of file + - `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)"` diff --git a/src/file-upload/file-item.class.ts b/src/file-upload/file-item.class.ts index 17fe274..daa732e 100644 --- a/src/file-upload/file-item.class.ts +++ b/src/file-upload/file-item.class.ts @@ -2,30 +2,30 @@ import { FileLikeObject } from './file-like-object.class'; import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class'; export class FileItem { - public file:FileLikeObject; - public _file:File; - public alias:string; - public url:string = '/'; - public method:string; - public headers:any = []; - public withCredentials:boolean = true; - public formData:any = []; - public isReady:boolean = false; - public isUploading:boolean = false; - public isUploaded:boolean = false; - public isSuccess:boolean = false; - public isCancel:boolean = false; - public isError:boolean = false; - public progress:number = 0; - public index:number = void 0; - public _xhr:XMLHttpRequest; - public _form:any; + public file: FileLikeObject; + public _file: File; + public alias: string; + public url: string = '/'; + public method: string; + public headers: any = []; + public withCredentials: boolean = true; + public formData: any = []; + public isReady: boolean = false; + public isUploading: boolean = false; + public isUploaded: boolean = false; + public isSuccess: boolean = false; + public isCancel: boolean = false; + public isError: boolean = false; + public progress: number = 0; + public index: number = void 0; + public _xhr: XMLHttpRequest; + public _form: any; - protected uploader:FileUploader; - protected some:File; - protected options:FileUploaderOptions; + protected uploader: FileUploader; + protected some: File; + protected options: FileUploaderOptions; - public constructor(uploader:FileUploader, some:File, options:FileUploaderOptions) { + public constructor(uploader: FileUploader, some: File, options: FileUploaderOptions) { this.uploader = uploader; this.some = some; this.options = options; @@ -38,7 +38,7 @@ export class FileItem { this.url = uploader.options.url; } - public upload():void { + public upload(): void { try { this.uploader.uploadItem(this); } catch (e) { @@ -47,43 +47,43 @@ export class FileItem { } } - public cancel():void { + public cancel(): void { this.uploader.cancelItem(this); } - public remove():void { + public remove(): void { this.uploader.removeFromQueue(this); } - public onBeforeUpload():void { + public onBeforeUpload(): void { return void 0; } - public onBuildForm(form:any):any { - return {form}; + public onBuildForm(form: any): any { + return { form }; } - public onProgress(progress:number):any { - return {progress}; + public onProgress(progress: number): any { + return { progress }; } - public onSuccess(response:string, status:number, headers:ParsedResponseHeaders):any { - return {response, status, headers}; + 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 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 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 onComplete(response: string, status: number, headers: ParsedResponseHeaders): any { + return { response, status, headers }; } - public _onBeforeUpload():void { + public _onBeforeUpload(): void { this.isReady = true; this.isUploading = true; this.isUploaded = false; @@ -94,16 +94,16 @@ export class FileItem { this.onBeforeUpload(); } - public _onBuildForm(form:any):void { + public _onBuildForm(form: any): void { this.onBuildForm(form); } - public _onProgress(progress:number):void { + public _onProgress(progress: number): void { this.progress = progress; this.onProgress(progress); } - public _onSuccess(response:string, status:number, headers:ParsedResponseHeaders):void { + public _onSuccess(response: string, status: number, headers: ParsedResponseHeaders): void { this.isReady = false; this.isUploading = false; this.isUploaded = true; @@ -115,7 +115,7 @@ export class FileItem { this.onSuccess(response, status, headers); } - public _onError(response:string, status:number, headers:ParsedResponseHeaders):void { + public _onError(response: string, status: number, headers: ParsedResponseHeaders): void { this.isReady = false; this.isUploading = false; this.isUploaded = true; @@ -127,7 +127,7 @@ export class FileItem { this.onError(response, status, headers); } - public _onCancel(response:string, status:number, headers:ParsedResponseHeaders):void { + public _onCancel(response: string, status: number, headers: ParsedResponseHeaders): void { this.isReady = false; this.isUploading = false; this.isUploaded = false; @@ -139,7 +139,7 @@ export class FileItem { this.onCancel(response, status, headers); } - public _onComplete(response:string, status:number, headers:ParsedResponseHeaders):void { + public _onComplete(response: string, status: number, headers: ParsedResponseHeaders): void { this.onComplete(response, status, headers); if (this.uploader.options.removeAfterUpload) { @@ -147,7 +147,7 @@ export class FileItem { } } - public _prepareToUploading():void { + public _prepareToUploading(): void { this.index = this.index || ++this.uploader._nextIndex; this.isReady = true; } diff --git a/src/file-upload/file-like-object.class.ts b/src/file-upload/file-like-object.class.ts index 8ca6c1d..746dbdd 100644 --- a/src/file-upload/file-like-object.class.ts +++ b/src/file-upload/file-like-object.class.ts @@ -1,32 +1,31 @@ -function isElement(node:any):boolean { +function isElement(node: any): boolean { return !!(node && (node.nodeName || node.prop && node.attr && node.find)); } export class FileLikeObject { - public lastModifiedDate:any; - public size:any; - public type:string; - public name:string; - public rawFile:string; + public lastModifiedDate: any; + public size: any; + public type: string; + public name: string; + public rawFile: string; - public constructor(fileOrInput:any) { + public constructor(fileOrInput: any) { this.rawFile = fileOrInput; let isInput = isElement(fileOrInput); let fakePathOrObject = isInput ? fileOrInput.value : fileOrInput; let postfix = typeof fakePathOrObject === 'string' ? 'FakePath' : 'Object'; let method = '_createFrom' + postfix; - (this as any)[method](fakePathOrObject); + (this as any)[ method ](fakePathOrObject); } - public _createFromFakePath(path:string):void { + public _createFromFakePath(path: string): void { this.lastModifiedDate = void 0; this.size = void 0; this.type = 'like/' + path.slice(path.lastIndexOf('.') + 1).toLowerCase(); this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2); } - public _createFromObject(object:{size:number, type:string, name:string}):void { - // this.lastModifiedDate = copy(object.lastModifiedDate); + public _createFromObject(object: { size: number, type: string, name: string }): void { this.size = object.size; this.type = object.type; this.name = object.name; diff --git a/src/file-upload/file-select.directive.ts b/src/file-upload/file-select.directive.ts index c1feed6..a942dcb 100644 --- a/src/file-upload/file-select.directive.ts +++ b/src/file-upload/file-select.directive.ts @@ -2,12 +2,10 @@ import { Directive, EventEmitter, ElementRef, Input, HostListener, Output } from import { FileUploader } from './file-uploader.class'; -// todo: filters - @Directive({ selector: '[ng2FileSelect]' }) export class FileSelectDirective { @Input() public uploader: FileUploader; - @Output() public onFileSelected:EventEmitter = new EventEmitter(); + @Output() public onFileSelected: EventEmitter = new EventEmitter(); protected element: ElementRef; @@ -27,23 +25,17 @@ export class FileSelectDirective { return !!this.element.nativeElement.attributes.multiple; } - @HostListener('change', ['$event']) + @HostListener('change') public onChange(): any { - // let files = this.uploader.isHTML5 ? this.element.nativeElement[0].files : this.element.nativeElement[0]; let files = this.element.nativeElement.files; let options = this.getOptions(); let filters = this.getFilters(); - // if(!this.uploader.isHTML5) this.destroy(); - this.uploader.addToQueue(files, options, filters); this.onFileSelected.emit(files); if (this.isEmptyAfterSelection()) { - // todo this.element.nativeElement.value = ''; - /*this.element.nativeElement - .replaceWith(this.element = this.element.nativeElement.clone(true)); // IE fix*/ } } } diff --git a/src/file-upload/file-type.class.ts b/src/file-upload/file-type.class.ts index ea16a18..f02bd7c 100644 --- a/src/file-upload/file-type.class.ts +++ b/src/file-upload/file-type.class.ts @@ -1,6 +1,6 @@ export class FileType { /* MS office */ - public static mime_doc:string[] = [ + public static mime_doc: string[] = [ 'application/msword', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', @@ -8,7 +8,7 @@ export class FileType { 'application/vnd.ms-word.document.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', @@ -19,7 +19,7 @@ export class FileType { 'application/vnd.ms-excel.addin.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', @@ -34,7 +34,7 @@ export class FileType { ]; /* PSD */ - public static mime_psd:string[] = [ + public static mime_psd: string[] = [ 'image/photoshop', 'image/x-photoshop', 'image/psd', @@ -44,7 +44,7 @@ export class FileType { ]; /* Compressed files */ - public static mime_compress:string[] = [ + public static mime_compress: string[] = [ 'application/x-gtar', 'application/x-gcompress', 'application/compress', @@ -53,7 +53,7 @@ export class FileType { 'application/octet-stream' ]; - public static getMimeClass(file:any):string { + public static getMimeClass(file: any): string { let mimeClass = 'application'; if (this.mime_psd.indexOf(file.type) !== -1) { mimeClass = 'image'; @@ -81,8 +81,8 @@ export class FileType { return mimeClass; } - public static fileTypeDetection(inputFilename:string):string { - let types:{[key:string]:string} = { + public static fileTypeDetection(inputFilename: string): string { + let types: { [ key: string ]: string } = { 'jpg': 'image', 'jpeg': 'image', 'tif': 'image', @@ -144,11 +144,11 @@ export class FileType { if (chunks.length < 2) { return 'application'; } - let extension = chunks[chunks.length - 1].toLowerCase(); - if (types[extension] === undefined) { + let extension = chunks[ chunks.length - 1 ].toLowerCase(); + if (types[ extension ] === undefined) { return 'application'; } else { - return types[extension]; + return types[ extension ]; } } } diff --git a/src/file-upload/file-upload.module.ts b/src/file-upload/file-upload.module.ts index e9c5b0f..62fdb14 100644 --- a/src/file-upload/file-upload.module.ts +++ b/src/file-upload/file-upload.module.ts @@ -5,9 +5,9 @@ import { FileDropDirective } from './file-drop.directive'; import { FileSelectDirective } from './file-select.directive'; @NgModule({ - imports: [CommonModule], - declarations: [FileDropDirective, FileSelectDirective], - exports: [FileDropDirective, FileSelectDirective] + imports: [ CommonModule ], + declarations: [ FileDropDirective, FileSelectDirective ], + exports: [ FileDropDirective, FileSelectDirective ] }) export class FileUploadModule { } diff --git a/src/file-upload/file-uploader.class.ts b/src/file-upload/file-uploader.class.ts index 9895825..7eadbc9 100644 --- a/src/file-upload/file-uploader.class.ts +++ b/src/file-upload/file-uploader.class.ts @@ -3,103 +3,106 @@ import { FileLikeObject } from './file-like-object.class'; import { FileItem } from './file-item.class'; import { FileType } from './file-type.class'; -function isFile(value:any):boolean { +function isFile(value: any): boolean { return (File && value instanceof File); } -// function isFileLikeObject(value:any) { + export interface Headers { - name:string; - value:string; + name: string; + value: string; } -export type ParsedResponseHeaders = {[headerFieldName:string]:string}; +export type ParsedResponseHeaders = { [ headerFieldName: string ]: string }; -export type FilterFunction = {name:string, fn:(item?:FileLikeObject, options?:FileUploaderOptions)=>boolean}; +export type FilterFunction = { + name: string, + fn: (item?: FileLikeObject, options?: FileUploaderOptions) => boolean +}; export interface FileUploaderOptions { - allowedMimeType?:Array; - allowedFileType?:Array; - autoUpload?:boolean; - isHTML5?:boolean; - filters?:Array; - headers?:Array; - method?:string; - authToken?:string; - maxFileSize?:number; - queueLimit?:number; - removeAfterUpload?:boolean; - url?:string; - disableMultipart?:boolean; + allowedMimeType?: string[]; + allowedFileType?: string[]; + autoUpload?: boolean; + isHTML5?: boolean; + filters?: FilterFunction[]; + headers?: Headers[]; + method?: string; + authToken?: string; + maxFileSize?: number; + queueLimit?: number; + removeAfterUpload?: boolean; + url?: string; + disableMultipart?: boolean; itemAlias?: string; authTokenHeader?: string; - additionalParameter?:{[key: string]: any}; - formatDataFunction?:Function; - formatDataFunctionIsAsync?:boolean; + additionalParameter?: { [ key: string ]: any }; + parametersBeforeFiles?: boolean; + formatDataFunction?: Function; + formatDataFunctionIsAsync?: boolean; } export class FileUploader { - public authToken:string; - public isUploading:boolean = false; - public queue:Array = []; - public progress:number = 0; - public _nextIndex:number = 0; - public autoUpload:any; + public authToken: string; + public isUploading: boolean = false; + public queue: FileItem[] = []; + public progress: number = 0; + public _nextIndex: number = 0; + public autoUpload: any; public authTokenHeader: string; public response: EventEmitter; - public options:FileUploaderOptions = { + public options: FileUploaderOptions = { autoUpload: false, isHTML5: true, filters: [], removeAfterUpload: false, disableMultipart: false, - formatDataFunction: function (item:FileItem) { return item._file; }, + formatDataFunction: (item: FileItem) => item._file, formatDataFunctionIsAsync: false }; - protected _failFilterIndex:number; + protected _failFilterIndex: number; - public constructor(options:FileUploaderOptions) { + public constructor(options: FileUploaderOptions) { this.setOptions(options); this.response = new EventEmitter(); } - public setOptions(options:FileUploaderOptions):void { + public setOptions(options: FileUploaderOptions): void { this.options = Object.assign(this.options, options); this.authToken = options.authToken; this.authTokenHeader = options.authTokenHeader || 'Authorization'; this.autoUpload = options.autoUpload; - this.options.filters.unshift({name: 'queueLimit', fn: this._queueLimitFilter}); + this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter }); if (this.options.maxFileSize) { - this.options.filters.unshift({name: 'fileSize', fn: this._fileSizeFilter}); + this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter }); } if (this.options.allowedFileType) { - this.options.filters.unshift({name: 'fileType', fn: this._fileTypeFilter}); + this.options.filters.unshift({ name: 'fileType', fn: this._fileTypeFilter }); } if (this.options.allowedMimeType) { - this.options.filters.unshift({name: 'mimeType', fn: this._mimeTypeFilter}); + this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter }); } - for(let i = 0; i < this.queue.length; i++) { - this.queue[i].url = this.options.url; + for (let i = 0; i < this.queue.length; i++) { + this.queue[ i ].url = this.options.url; } - // this.options.filters.unshift({name: 'folder', fn: this._folderFilter}); } - public addToQueue(files:File[], options?:FileUploaderOptions, filters?:FilterFunction[]|string):void { - let list:File[] = []; + 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:FileItem[] = []; - list.map((some:File) => { + let addedFileItems: FileItem[] = []; + list.map((some: File) => { if (!options) { options = this.options; } @@ -111,7 +114,7 @@ export class FileUploader { this.queue.push(fileItem); this._onAfterAddingFile(fileItem); } else { - let filter = arrayOfFilters[this._failFilterIndex]; + let filter = arrayOfFilters[ this._failFilterIndex ]; this._onWhenAddingFileFailed(temp, filter, options); } }); @@ -125,9 +128,9 @@ export class FileUploader { } } - public removeFromQueue(value:FileItem):void { + public removeFromQueue(value: FileItem): void { let index = this.getIndexOfItem(value); - let item = this.queue[index]; + let item = this.queue[ index ]; if (item.isUploading) { item.cancel(); } @@ -135,149 +138,144 @@ export class FileUploader { this.progress = this._getTotalProgress(); } - public clearQueue():void { + public clearQueue(): void { while (this.queue.length) { - this.queue[0].remove(); + this.queue[ 0 ].remove(); } this.progress = 0; } - public uploadItem(value:FileItem):void { + public uploadItem(value: FileItem): void { let index = this.getIndexOfItem(value); - let item = this.queue[index]; + let item = this.queue[ index ]; let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport'; item._prepareToUploading(); if (this.isUploading) { return; } this.isUploading = true; - (this as any)[transport](item); + (this as any)[ transport ](item); } - public cancelItem(value:FileItem):void { + public cancelItem(value: FileItem): void { let index = this.getIndexOfItem(value); - let item = this.queue[index]; + let item = this.queue[ index ]; let prop = this.options.isHTML5 ? item._xhr : item._form; if (item && item.isUploading) { prop.abort(); } } - public uploadAll():void { - let items = this.getNotUploadedItems().filter((item:FileItem) => !item.isUploading); + public uploadAll(): void { + let items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading); if (!items.length) { return; } - items.map((item:FileItem) => item._prepareToUploading()); - items[0].upload(); + items.map((item: FileItem) => item._prepareToUploading()); + items[ 0 ].upload(); } - public cancelAll():void { + public cancelAll(): void { let items = this.getNotUploadedItems(); - items.map((item:FileItem) => item.cancel()); + items.map((item: FileItem) => item.cancel()); } - public isFile(value:any):boolean { + public isFile(value: any): boolean { return isFile(value); } - public isFileLikeObject(value:any):boolean { + public isFileLikeObject(value: any): boolean { return value instanceof FileLikeObject; } - public getIndexOfItem(value:any):number { + public getIndexOfItem(value: any): number { return typeof value === 'number' ? value : this.queue.indexOf(value); } - public getNotUploadedItems():Array { - return this.queue.filter((item:FileItem) => !item.isUploaded); + public getNotUploadedItems(): any[] { + return this.queue.filter((item: FileItem) => !item.isUploaded); } - public getReadyItems():Array { + public getReadyItems(): any[] { return this.queue - .filter((item:FileItem) => (item.isReady && !item.isUploading)) - .sort((item1:any, item2:any) => item1.index - item2.index); + .filter((item: FileItem) => (item.isReady && !item.isUploading)) + .sort((item1: any, item2: any) => item1.index - item2.index); } - public destroy():void { - return void 0; - /*forEach(this._directives, (key) => { - forEach(this._directives[key], (object) => { - object.destroy(); - }); - });*/ - } - - public onAfterAddingAll(fileItems:any):any { - return {fileItems}; - } - - public onBuildItemForm(fileItem:FileItem, form:any):any { - return {fileItem, form}; - } - - public onAfterAddingFile(fileItem:FileItem):any { - return {fileItem}; - } - - public onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):any { - return {item, filter, options}; - } - - public onBeforeUploadItem(fileItem:FileItem):any { - return {fileItem}; - } - - public onProgressItem(fileItem:FileItem, progress:any):any { - return {fileItem, progress}; - } - - public onProgressAll(progress:any):any { - return {progress}; - } - - public onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { - return {item, response, status, headers}; - } - - public onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { - return {item, response, status, headers}; - } - - public onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { - return {item, response, status, headers}; - } - - public onCompleteItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any { - return {item, response, status, headers}; - } - - public onCompleteAll():any { + public destroy(): void { return void 0; } - public _mimeTypeFilter(item:FileLikeObject):boolean { + public onAfterAddingAll(fileItems: any): any { + return { fileItems }; + } + + public onBuildItemForm(fileItem: FileItem, form: any): any { + return { fileItem, form }; + } + + public onAfterAddingFile(fileItem: FileItem): any { + return { fileItem }; + } + + public onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): any { + return { item, filter, options }; + } + + public onBeforeUploadItem(fileItem: FileItem): any { + return { fileItem }; + } + + public onProgressItem(fileItem: FileItem, progress: any): any { + return { fileItem, progress }; + } + + public onProgressAll(progress: any): any { + return { progress }; + } + + public onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { + return { item, response, status, headers }; + } + + public onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { + return { item, response, status, headers }; + } + + public onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { + return { item, response, status, headers }; + } + + public onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { + return { item, response, status, headers }; + } + + public onCompleteAll(): any { + return void 0; + } + + public _mimeTypeFilter(item: FileLikeObject): boolean { return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1); } - public _fileSizeFilter(item:FileLikeObject):boolean { + public _fileSizeFilter(item: FileLikeObject): boolean { return !(this.options.maxFileSize && item.size > this.options.maxFileSize); } - public _fileTypeFilter(item:FileLikeObject):boolean { + public _fileTypeFilter(item: FileLikeObject): boolean { return !(this.options.allowedFileType && - this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1); + this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1); } - public _onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):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:FileItem, response:string, status:number, headers:ParsedResponseHeaders):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]; + let nextItem = this.getReadyItems()[ 0 ]; this.isUploading = false; if (nextItem) { nextItem.upload(); @@ -288,26 +286,21 @@ export class FileUploader { this._render(); } - protected _headersGetter(parsedHeaders:ParsedResponseHeaders):any { - return (name:any):any => { + protected _headersGetter(parsedHeaders: ParsedResponseHeaders): any { + return (name: any): any => { if (name) { - return parsedHeaders[name.toLowerCase()] || void 0; + return parsedHeaders[ name.toLowerCase() ] || void 0; } return parsedHeaders; }; } - protected _xhrTransport(item:FileItem):any { + protected _xhrTransport(item: FileItem): any { let that = this; let xhr = item._xhr = new XMLHttpRequest(); - let sendable:any; + let sendable: any; this._onBeforeUploadItem(item); - // todo - /*item.formData.map(obj => { - obj.map((value, key) => { - form.append(key, value); - }); - });*/ + if (typeof item._file.size !== 'number') { throw new TypeError('The file specified is no longer valid'); } @@ -315,11 +308,15 @@ export class FileUploader { sendable = new FormData(); this._onBuildItemForm(item, sendable); + const appendFile = () => sendable.append(item.alias, item._file, item.file.name); + if (!this.options.parametersBeforeFiles) { + appendFile(); + } // For AWS, Additional Parameters must come BEFORE Files if (this.options.additionalParameter !== undefined) { - Object.keys(this.options.additionalParameter).forEach((key:string) => { - let paramVal = this.options.additionalParameter[key]; + Object.keys(this.options.additionalParameter).forEach((key: string) => { + let paramVal = this.options.additionalParameter[ key ]; // Allow an additional parameter to include the filename if (typeof paramVal === 'string' && paramVal.indexOf('{{file_name}}') >= 0) { paramVal = paramVal.replace('{{file_name}}', item.file.name); @@ -328,12 +325,14 @@ export class FileUploader { }); } - sendable.append(item.alias, item._file, item.file.name); + if (this.options.parametersBeforeFiles) { + appendFile(); + } } else { sendable = this.options.formatDataFunction(item); } - xhr.upload.onprogress = (event:any) => { + xhr.upload.onprogress = (event: any) => { let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0); this._onProgressItem(item, progress); }; @@ -342,7 +341,7 @@ export class FileUploader { let response = this._transformResponse(xhr.response, headers); let gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error'; let method = '_on' + gist + 'Item'; - (this as any)[method](item, response, xhr.status, headers); + (this as any)[ method ](item, response, xhr.status, headers); this._onCompleteItem(item, response, xhr.status, headers); }; xhr.onerror = () => { @@ -372,14 +371,14 @@ export class FileUploader { if (this.authToken) { xhr.setRequestHeader(this.authTokenHeader, this.authToken); } - xhr.onreadystatechange = function() { + xhr.onreadystatechange = function () { if (xhr.readyState == XMLHttpRequest.DONE) { that.response.emit(xhr.responseText) } } if (this.options.formatDataFunctionIsAsync) { sendable.then( - (result:any) => xhr.send(JSON.stringify(result)) + (result: any) => xhr.send(JSON.stringify(result)) ); } else { xhr.send(sendable); @@ -387,7 +386,7 @@ export class FileUploader { this._render(); } - protected _getTotalProgress(value:number = 0):number { + protected _getTotalProgress(value: number = 0): number { if (this.options.removeAfterUpload) { return value; } @@ -398,7 +397,7 @@ export class FileUploader { return Math.round(uploaded * ratio + current); } - protected _getFilters(filters:FilterFunction[]|string):FilterFunction[] { + protected _getFilters(filters: FilterFunction[] | string): FilterFunction[] { if (!filters) { return this.options.filters; } @@ -408,93 +407,77 @@ export class FileUploader { if (typeof filters === 'string') { let names = filters.match(/[^\s,]+/g); return this.options.filters - .filter((filter:any) => names.indexOf(filter.name) !== -1); + .filter((filter: any) => names.indexOf(filter.name) !== -1); } return this.options.filters; } - protected _render():any { + protected _render(): any { return void 0; - // todo: ? } - // protected _folderFilter(item:FileItem):boolean { - // return !!(item.size || item.type); - // } - - protected _queueLimitFilter():boolean { + protected _queueLimitFilter(): boolean { return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit; } - protected _isValidFile(file:FileLikeObject, filters:FilterFunction[], options:FileUploaderOptions):boolean { + protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean { this._failFilterIndex = -1; - return !filters.length ? true : filters.every((filter:FilterFunction) => { + return !filters.length ? true : filters.every((filter: FilterFunction) => { this._failFilterIndex++; return filter.fn.call(this, file, options); }); } - protected _isSuccessCode(status:number):boolean { + protected _isSuccessCode(status: number): boolean { return (status >= 200 && status < 300) || status === 304; } - /* tslint:disable */ - protected _transformResponse(response:string, headers:ParsedResponseHeaders):string { - // todo: ? - /*var headersGetter = this._headersGetter(headers); - forEach($http.defaults.transformResponse, (transformFn) => { - response = transformFn(response, headersGetter); - });*/ + protected _transformResponse(response: string, headers: ParsedResponseHeaders): string { return response; } - /* tslint:enable */ - protected _parseHeaders(headers:string):ParsedResponseHeaders { - let parsed:any = {}; - let key:any; - let val:any; - let i:any; + protected _parseHeaders(headers: string): ParsedResponseHeaders { + let parsed: any = {}; + let key: any; + let val: any; + let i: any; if (!headers) { return parsed; } - headers.split('\n').map((line:any) => { + headers.split('\n').map((line: any) => { i = line.indexOf(':'); key = line.slice(0, i).trim().toLowerCase(); val = line.slice(i + 1).trim(); if (key) { - parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val; + parsed[ key ] = parsed[ key ] ? parsed[ key ] + ', ' + val : val; } }); return parsed; } - /*protected _iframeTransport(item:FileItem) { - // todo: implement it later - }*/ - - protected _onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):void { + protected _onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): void { this.onWhenAddingFileFailed(item, filter, options); } - protected _onAfterAddingFile(item:FileItem):void { + protected _onAfterAddingFile(item: FileItem): void { this.onAfterAddingFile(item); } - protected _onAfterAddingAll(items:any):void { + protected _onAfterAddingAll(items: any): void { this.onAfterAddingAll(items); } - protected _onBeforeUploadItem(item:FileItem):void { + protected _onBeforeUploadItem(item: FileItem): void { item._onBeforeUpload(); this.onBeforeUploadItem(item); } - protected _onBuildItemForm(item:FileItem, form:any):void { + protected _onBuildItemForm(item: FileItem, form: any): void { item._onBuildForm(form); this.onBuildItemForm(item, form); } - protected _onProgressItem(item:FileItem, progress:any):void { + protected _onProgressItem(item: FileItem, progress: any): void { let total = this._getTotalProgress(progress); this.progress = total; item._onProgress(progress); @@ -503,14 +486,12 @@ export class FileUploader { this._render(); } - /* tslint:disable */ - protected _onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void { + protected _onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void { item._onSuccess(response, status, headers); this.onSuccessItem(item, response, status, headers); } - /* tslint:enable */ - protected _onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void { + protected _onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void { item._onCancel(response, status, headers); this.onCancelItem(item, response, status, headers); }