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
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",
diff --git a/src/file-upload/file-uploader.class.ts b/src/file-upload/file-uploader.class.ts
index 5f17770..056eb18 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';
@@ -32,6 +33,8 @@ export interface FileUploaderOptions {
itemAlias?: string;
authTokenHeader?: string;
additionalParameter?:{[key: string]: any};
+ formatDataFunction?:Function;
+ formatDataFunctionIsAsync?:boolean;
}
export class FileUploader {
@@ -43,19 +46,23 @@ export class FileUploader {
public _nextIndex:number = 0;
public autoUpload:any;
public authTokenHeader: string;
+ public response: EventEmitter;
public options:FileUploaderOptions = {
autoUpload: false,
isHTML5: true,
filters: [],
removeAfterUpload: false,
- disableMultipart: false
+ disableMultipart: false,
+ formatDataFunction: function (item:FileItem) { return item._file; },
+ formatDataFunctionIsAsync: false
};
protected _failFilterIndex:number;
public constructor(options:FileUploaderOptions) {
this.setOptions(options);
+ this.response = new EventEmitter();
}
public setOptions(options:FileUploaderOptions):void {
@@ -291,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);
@@ -315,7 +323,7 @@ export class FileUploader {
});
}
} else {
- sendable = item._file;
+ sendable = this.options.formatDataFunction(item);
}
xhr.upload.onprogress = (event:any) => {
@@ -357,7 +365,18 @@ export class FileUploader {
if (this.authToken) {
xhr.setRequestHeader(this.authTokenHeader, this.authToken);
}
- xhr.send(sendable);
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState == XMLHttpRequest.DONE) {
+ that.response.emit(xhr.responseText)
+ }
+ }
+ if (this.options.formatDataFunctionIsAsync) {
+ sendable.then(
+ (result:any) => xhr.send(JSON.stringify(result))
+ );
+ } else {
+ xhr.send(sendable);
+ }
this._render();
}