add new feature: send plain json (#241)

* Update README.md * Update README.md * modify advanced example for plainJson option * Update README.md * Update README.md * Update README.md * Update ngx-uploader.ts * Update ng-uploader-options.class.ts * Update README.md * Update README.md * Update README.md * Update README.md * fix indentation and title * fix title of demo * remove iteration in plainJson-condition
bleenco · Mar 29, 2017 · 57a2517 · 57a2517
1 parent 199b4fe
commit 57a2517
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ npm install ngx-uploader --save
 
 - [Basic Example](https://github.com/jkuri/ngx-uploader#basic-example)
 - [Advanced Example](https://github.com/jkuri/ngx-uploader#advanced-example)
+- [Advanced Example with plain JSON](https://github.com/jkuri/ngx-uploader#advanced-example-json)
 
 --------
 
@@ -200,6 +201,131 @@ export class AdvancedDemoComponent {
 </div>
 ```
 
+#### Advanced Example with plain JSON
+
+```ts
+// advanced-demo.component.ts
+import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
+import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';
+
+@Component({
+  selector: 'advanced-demo',
+  templateUrl: 'advanced-demo.component.html'
+})
+export class AdvancedDemoComponent {
+  options: NgUploaderOptions;
+  response: any;
+  sizeLimit: number = 1000000; // 1MB
+  previewData: any;
+  errorMessage: string;
+  startUploadEvent: EventEmitter<string>;
+
+  constructor(@Inject(NgZone) private zone: NgZone) {
+    this.options = new NgUploaderOptions({
+      url: 'http://api.ngx-uploader.com/upload',
+      filterExtensions: true,
+      allowedExtensions: ['txt', 'pdf'],
+      maxSize: 2097152,
+      data:{
+        '@type': "File",
+        "title": "My lorem.txt file",
+        "file": {
+          "data": "TG9yZW0gSXBzdW0u",
+          "encoding": "base64",
+          "filename": "lorem.txt",
+          "content-type": "text/plain"
+          }
+        },
+       customHeaders: {
+         'Content-Type':'application/json',
+         'Accept':'application/json'
+      },
+      autoUpload: false,
+      plainJson: true,
+      fieldName: 'file',
+      fieldReset: true,
+      maxUploads: 2,
+      method: 'POST',
+      previewUrl: true,
+      withCredentials: false
+    });
+
+    this.startUploadEvent = new EventEmitter<string>();
+  }
+
+  startUpload() {
+    this.startUploadEvent.emit("startUpload");
+  }
+
+  beforeUpload(ev : Event): void {
+
+    let file: File =  ev.target['files'][0];
+    let myReader: FileReader = new FileReader();
+
+    myReader.onloadend = (e) => {
+      let tmpB64String = myReader.result.split(',');
+      this.options['data']['file']['data'] = tmpB64String[1] ;
+      this.options['data']['file']['filename'] = file.name;
+      this.options['data']['title'] = file.name;   
+    }
+    myReader.readAsDataURL(file);
+  }
+
+  handleUpload(data: any) {
+    setTimeout(() => {
+      this.zone.run(() => {
+        this.response = data;
+        if (data && data.response) {
+          this.response = JSON.parse(data.response);
+        }
+      });
+    });
+  }
+
+  handlePreviewData(data: any) {
+    this.previewData = data;
+  }
+}
+```
+
+```html
+<!-- advanced-demo.component.html -->
+<div class="button-container">
+  <label class="upload-button is-pulled-left">
+    <input type="file"
+           class="hidden"
+           ngFileSelect
+           [options]="options"
+           [events]="startUploadEvent"
+           (onUpload)="handleUpload($event)"
+           (onPreviewData)="handlePreviewData($event)"
+           (beforeUpload)="beforeUpload($event)">
+    Browse
+  </label>
+</div>
+
+<p>
+  Allowed extensions: <code><b>.jpg</b>, <b>.png</b></code>
+</p>
+
+<div>
+  <button type="button" class="start-upload-button" (click)="startUpload()">Start Upload</button>
+</div>
+
+<div *ngIf="response">
+  <pre><code>{{ response | json }}</code></pre>
+</div>
+
+<div *ngIf="errorMessage">
+  <code>{{ errorMessage }}</code>
+</div>
+
+<div *ngIf="previewData && !response">
+  <img [src]="previewData">
+</div>
+```
+---------
+
 ### Demos
 
 For more information, examples and usage examples please see [demos](http://ngx-uploader.com)

diff --git a/src/classes/ng-uploader-options.class.ts b/src/classes/ng-uploader-options.class.ts
@@ -20,6 +20,8 @@ export interface INgUploaderOptions {
   filterExtensions?: boolean;
   allowedExtensions?: string[];
   maxSize?: number;
+  plainJson?: boolean;
+
 }
 
 export class NgUploaderOptions implements INgUploaderOptions {
@@ -44,6 +46,7 @@ export class NgUploaderOptions implements INgUploaderOptions {
   filterExtensions?: boolean;
   allowedExtensions?: string[];
   maxSize?: number;
+  plainJson?: boolean;
 
   constructor(obj: INgUploaderOptions) {
     function use<T>(source: T, defaultValue: T): T {
@@ -71,6 +74,7 @@ export class NgUploaderOptions implements INgUploaderOptions {
     this.filterExtensions = use(obj.filterExtensions, false);
     this.allowedExtensions = use(obj.allowedExtensions, []);
     this.maxSize = use(obj.maxSize, undefined);
+    this.plainJson =  use(obj.plainJson, false);
   }
 
 }
diff --git a/src/services/ngx-uploader.ts b/src/services/ngx-uploader.ts
@@ -30,9 +30,12 @@ export class NgUploaderService {
 
   uploadFile(file: File): void {
     let xhr = new XMLHttpRequest();
-    let payload: FormData | File;
-
-    if (this.opts.multipart) {
+    let payload: FormData | File | {};
+
+    if (this.opts.plainJson) {
+      payload = JSON.stringify(this.opts.data)
+    }
+    else if (this.opts.multipart) {
       let form = new FormData();
       Object.keys(this.opts.data).forEach(k => {
         form.append(k, this.opts.data[k]);