diff --git a/README.md b/README.md index 4f7410ba..955ca314 100644 --- 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 { ``` +#### 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; + + 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(); + } + + 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 + +
+ +
+ +

+ Allowed extensions: .jpg, .png +

+ +
+ +
+ +
+
{{ response | json }}
+
+ +
+ {{ errorMessage }} +
+ +
+ +
+``` +--------- + ### 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 index b37e11f2..13f9eaf9 100644 --- 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(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 index 5695cb97..146097d4 100644 --- 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]);