Merge pull request #901 from davidmds/development

Add response and function to modify the request body

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
 

demo/src/app/components/file-upload/simple-demo.html

@@ -115,4 +115,16 @@
 
     </div>
 
+    <br><br>
+
+    <div class="row">
+        <div class="col-md-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">Response</div>
+                <div class="panel-body">
+                  {{ response }}
+                </div>
+            </div>
+        </div>
+    </div>
 </div>

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;

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)"`

demo/src/tsconfig.json

@@ -3,7 +3,7 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "noEmitHelpers" :true,
+    "noEmitHelpers": false,
     "lib": ["es6", "dom"],
     "types": [
       "jasmine",

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<any>;
 
   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<any>();
   }
 
   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();
   }