From 5357a243f6d1ec9bbb70e973460ff773b2c4f361 Mon Sep 17 00:00:00 2001 From: David Martins Date: Wed, 4 Oct 2017 16:36:48 -0300 Subject: [PATCH 1/5] Added event with return of request --- src/file-upload/file-uploader.class.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/file-upload/file-uploader.class.ts b/src/file-upload/file-uploader.class.ts index 5f17770..998352c 100644 --- a/src/file-upload/file-uploader.class.ts +++ b/src/file-upload/file-uploader.class.ts @@ -1,3 +1,4 @@ +import { EventEmitter } from '@angular/core'; import { FileLikeObject } from './file-like-object.class'; import { FileItem } from './file-item.class'; import { FileType } from './file-type.class'; @@ -43,6 +44,7 @@ export class FileUploader { public _nextIndex:number = 0; public autoUpload:any; public authTokenHeader: string; + public response: EventEmitter; public options:FileUploaderOptions = { autoUpload: false, @@ -56,6 +58,7 @@ export class FileUploader { public constructor(options:FileUploaderOptions) { this.setOptions(options); + this.response = new EventEmitter(); } public setOptions(options:FileUploaderOptions):void { @@ -358,6 +361,11 @@ export class FileUploader { xhr.setRequestHeader(this.authTokenHeader, this.authToken); } xhr.send(sendable); + xhr.onreadystatechange = function() { + if (xhr.readyState == XMLHttpRequest.DONE) { + this.response.emit(xhr.responseText) + } + } this._render(); } From 14812e0cf729c367e733408afbb22b540893eb14 Mon Sep 17 00:00:00 2001 From: David Martins Date: Wed, 4 Oct 2017 16:52:28 -0300 Subject: [PATCH 2/5] Added option to send request body modifier function --- src/file-upload/file-uploader.class.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/file-upload/file-uploader.class.ts b/src/file-upload/file-uploader.class.ts index 998352c..1e96861 100644 --- a/src/file-upload/file-uploader.class.ts +++ b/src/file-upload/file-uploader.class.ts @@ -33,6 +33,8 @@ export interface FileUploaderOptions { itemAlias?: string; authTokenHeader?: string; additionalParameter?:{[key: string]: any}; + formatDataFunction?:Function; + formatDataFunctionIsAsync?:boolean; } export class FileUploader { @@ -51,7 +53,9 @@ export class FileUploader { isHTML5: true, filters: [], removeAfterUpload: false, - disableMultipart: false + disableMultipart: false, + formatDataFunction: function (item:FileItem) { return item._file; }, + formatDataFunctionIsAsync: false }; protected _failFilterIndex:number; @@ -318,7 +322,7 @@ export class FileUploader { }); } } else { - sendable = item._file; + sendable = this.options.formatDataFunction(item); } xhr.upload.onprogress = (event:any) => { @@ -360,12 +364,18 @@ export class FileUploader { if (this.authToken) { xhr.setRequestHeader(this.authTokenHeader, this.authToken); } - xhr.send(sendable); xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { this.response.emit(xhr.responseText) } } + if (this.options.formatDataFunctionIsAsync) { + sendable.then( + (result:any) => xhr.send(JSON.stringify(result)) + ); + } else { + xhr.send(sendable); + } this._render(); } From c84046e86ec95e2392da4d287e21582d781ebfa4 Mon Sep 17 00:00:00 2001 From: David Martins Date: Wed, 4 Oct 2017 17:03:16 -0300 Subject: [PATCH 3/5] Update README --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 9e94668..8c099d5 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,8 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g 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. 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. ### Events From 4c0c4c70bcbfe6acf4158ffbf10bb53a275bd184 Mon Sep 17 00:00:00 2001 From: David Martins Date: Fri, 6 Oct 2017 17:20:26 -0300 Subject: [PATCH 4/5] Fixing bug in response --- src/file-upload/file-uploader.class.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/file-upload/file-uploader.class.ts b/src/file-upload/file-uploader.class.ts index 1e96861..056eb18 100644 --- a/src/file-upload/file-uploader.class.ts +++ b/src/file-upload/file-uploader.class.ts @@ -298,6 +298,7 @@ export class FileUploader { } protected _xhrTransport(item:FileItem):any { + let that = this; let xhr = item._xhr = new XMLHttpRequest(); let sendable:any; this._onBeforeUploadItem(item); @@ -366,7 +367,7 @@ export class FileUploader { } xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { - this.response.emit(xhr.responseText) + that.response.emit(xhr.responseText) } } if (this.options.formatDataFunctionIsAsync) { From be7f164d98ce966ceccddd3e403b5cb2812eac2e Mon Sep 17 00:00:00 2001 From: David Martins Date: Fri, 6 Oct 2017 17:22:20 -0300 Subject: [PATCH 5/5] Updating example --- .../components/file-upload/simple-demo.html | 12 +++++++ .../app/components/file-upload/simple-demo.ts | 33 +++++++++++++++++-- demo/src/doc.md | 4 +++ demo/src/tsconfig.json | 2 +- 4 files changed, 47 insertions(+), 4 deletions(-) diff --git a/demo/src/app/components/file-upload/simple-demo.html b/demo/src/app/components/file-upload/simple-demo.html index a358c53..4333d7b 100644 --- a/demo/src/app/components/file-upload/simple-demo.html +++ b/demo/src/app/components/file-upload/simple-demo.html @@ -115,4 +115,16 @@ +

+ +
+
+
+
Response
+
+ {{ response }} +
+
+
+
diff --git a/demo/src/app/components/file-upload/simple-demo.ts b/demo/src/app/components/file-upload/simple-demo.ts index 1d2f354..4a26a21 100644 --- a/demo/src/app/components/file-upload/simple-demo.ts +++ b/demo/src/app/components/file-upload/simple-demo.ts @@ -9,9 +9,36 @@ const URL = 'https://evening-anchorage-3159.herokuapp.com/api/'; templateUrl: './simple-demo.html' }) export class SimpleDemoComponent { - public uploader:FileUploader = new FileUploader({url: URL}); - public hasBaseDropZoneOver:boolean = false; - public hasAnotherDropZoneOver:boolean = false; + + uploader:FileUploader; + hasBaseDropZoneOver:boolean; + hasAnotherDropZoneOver:boolean; + response:string; + + constructor (){ + this.uploader = new FileUploader({ + url: URL, + disableMultipart: true, // 'DisableMultipart' must be 'true' for formatDataFunction to be called. + formatDataFunctionIsAsync: true, + formatDataFunction: async (item) => { + return new Promise( (resolve, reject) => { + resolve({ + name: item._file.name, + length: item._file.size, + contentType: item._file.type, + date: new Date() + }); + }); + } + }); + + this.hasBaseDropZoneOver = false; + this.hasAnotherDropZoneOver = false; + + this.response = ''; + + this.uploader.response.subscribe( res => this.response = res ); + } public fileOverBase(e:any):void { this.hasBaseDropZoneOver = e; diff --git a/demo/src/doc.md b/demo/src/doc.md index 9954d39..eacd89a 100644 --- a/demo/src/doc.md +++ b/demo/src/doc.md @@ -25,6 +25,9 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u 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. + 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. ## FileDrop API @@ -37,3 +40,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 diff --git a/demo/src/tsconfig.json b/demo/src/tsconfig.json index 2f97dc9..34d32dd 100644 --- a/demo/src/tsconfig.json +++ b/demo/src/tsconfig.json @@ -3,7 +3,7 @@ "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "noEmitHelpers" :true, + "noEmitHelpers": false, "lib": ["es6", "dom"], "types": [ "jasmine",