From 22307d266fe1a25e109e9315515ca05156e38591 Mon Sep 17 00:00:00 2001 From: Tim Donohue Date: Tue, 21 Jun 2016 10:48:12 -0400 Subject: [PATCH] feat(multipart): Create disableMultipart option in FileUploader (#224) * Create disableMultipart option in FileUploader * Add basic docs --- README.md | 3 ++- components/file-upload/file-uploader.class.ts | 18 +++++++++++++----- components/file-upload/readme.md | 3 ++- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index c4ced13..8914ec2 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,11 @@ Follow me [![twitter](https://img.shields.io/twitter/follow/valorkin.svg?style=s - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) - Parameters that supported by this object: + Parameters supported by this object: 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. ### Events diff --git a/components/file-upload/file-uploader.class.ts b/components/file-upload/file-uploader.class.ts index 8fcc55e..88df666 100644 --- a/components/file-upload/file-uploader.class.ts +++ b/components/file-upload/file-uploader.class.ts @@ -28,6 +28,7 @@ export interface FileUploaderOptions { queueLimit?:number; removeAfterUpload?:boolean; url?:string; + disableMultipart?:boolean; } export class FileUploader { @@ -43,7 +44,8 @@ export class FileUploader { autoUpload: false, isHTML5: true, filters: [], - removeAfterUpload: false + removeAfterUpload: false, + disableMultipart: false }; private _failFilterIndex:number; @@ -282,7 +284,7 @@ export class FileUploader { protected _xhrTransport(item:FileItem):any { let xhr = item._xhr = new XMLHttpRequest(); - let form = new FormData(); + let sendable:any; this._onBeforeUploadItem(item); // todo /*item.formData.map(obj => { @@ -293,9 +295,15 @@ export class FileUploader { if (typeof item._file.size !== 'number') { throw new TypeError('The file specified is no longer valid'); } - this._onBuildItemForm(item, form); + if(!this.options.disableMultipart) { + sendable = new FormData(); + this._onBuildItemForm(item, sendable); + + sendable.append(item.alias, item._file, item.file.name); + } else { + sendable = item._file; + } - form.append(item.alias, item._file, item.file.name); xhr.upload.onprogress = (event:any) => { let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0); this._onProgressItem(item, progress); @@ -334,7 +342,7 @@ export class FileUploader { if (this.authToken) { xhr.setRequestHeader('Authorization', this.authToken); } - xhr.send(form); + xhr.send(sendable); this._render(); } diff --git a/components/file-upload/readme.md b/components/file-upload/readme.md index 62b9b18..c1f7d2d 100644 --- a/components/file-upload/readme.md +++ b/components/file-upload/readme.md @@ -20,10 +20,11 @@ import {FileSelectDirective, FileDropDirective, FileUploader} from 'ng2-file-upl - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) - Parameters that supported by this object: + Parameters supported by this object: 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. ## FileDrop API