diff --git a/README.md b/README.md index 3e56a7cf..4f7410ba 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,7 @@ export class AdvancedDemoComponent { url: 'http://api.ngx-uploader.com/upload', filterExtensions: true, allowedExtensions: ['jpg', 'png'], + maxSize: 2097152, data: { userId: 12 }, autoUpload: false, fieldName: 'file', diff --git a/src/classes/ng-uploader-options.class.ts b/src/classes/ng-uploader-options.class.ts index fb59d93e..d2586d6d 100644 --- a/src/classes/ng-uploader-options.class.ts +++ b/src/classes/ng-uploader-options.class.ts @@ -6,10 +6,11 @@ export interface INgUploaderOptions { maxUploads?: number; data?: any; autoUpload?: boolean; - multipart?: any; + multipart?: boolean; method?: string; customHeaders?: any; encodeHeaders?: boolean; + filenameHeader?: string; authTokenPrefix?: string; authToken?: string; fieldName?: string; @@ -18,6 +19,7 @@ export interface INgUploaderOptions { calculateSpeed?: boolean; filterExtensions?: boolean; allowedExtensions?: string[]; + maxSize?: number; } export class NgUploaderOptions implements INgUploaderOptions { @@ -28,10 +30,11 @@ export class NgUploaderOptions implements INgUploaderOptions { maxUploads?: number; data?: any; autoUpload?: boolean; - multipart?: any; + multipart?: boolean; method?: string; customHeaders?: any; encodeHeaders?: boolean; + filenameHeader?: string; authTokenPrefix?: string; authToken?: string; fieldName?: string; @@ -40,6 +43,7 @@ export class NgUploaderOptions implements INgUploaderOptions { calculateSpeed?: boolean; filterExtensions?: boolean; allowedExtensions?: string[]; + maxSize?: number; constructor(obj: INgUploaderOptions) { function use(source: T, defaultValue: T): T { @@ -53,10 +57,11 @@ export class NgUploaderOptions implements INgUploaderOptions { this.maxUploads = use(obj.maxUploads, 10); this.data = use(obj.data, {}); this.autoUpload = use(obj.autoUpload, true); - this.multipart = use(obj.multipart, false); + this.multipart = use(obj.multipart, true); this.method = use(obj.method, 'POST'); this.customHeaders = use(obj.customHeaders, {}); this.encodeHeaders = use(obj.encodeHeaders, false); + this.filenameHeader = use(obj.filenameHeader, undefined); this.authTokenPrefix = use(obj.authTokenPrefix, 'Bearer'); this.authToken = use(obj.authToken, undefined); this.fieldName = use(obj.fieldName, 'file'); @@ -65,6 +70,7 @@ export class NgUploaderOptions implements INgUploaderOptions { this.calculateSpeed = use(obj.calculateSpeed, true); this.filterExtensions = use(obj.filterExtensions, false); this.allowedExtensions = use(obj.allowedExtensions, []); + this.maxSize = use(obj.maxSize, undefined); } } diff --git a/src/directives/ng-file-drop.ts b/src/directives/ng-file-drop.ts index 96defcfb..60c1ea45 100644 --- a/src/directives/ng-file-drop.ts +++ b/src/directives/ng-file-drop.ts @@ -105,7 +105,7 @@ export class NgFileDropDirective implements OnChanges, OnInit { } if (this.options.filterExtensions && this.options.allowedExtensions && this.files && this.files.length) { - this.files = this.files.filter(f => { + this.files = [].filter.call(this.files, (f: any) => { let allowedExtensions = this.options.allowedExtensions || []; if (allowedExtensions.indexOf(f.type) !== -1) { return true; @@ -122,6 +122,17 @@ export class NgFileDropDirective implements OnChanges, OnInit { }); } + if (this.options.maxSize > 0) { + this.files = [].filter.call(this.files, (f: any) => { + if (f.size <= this.options.maxSize) { + return true; + } + + this.onUploadRejected.emit({file: f, reason: UploadRejected.MAX_SIZE_EXCEEDED}); + return false; + }); + } + if (this.files.length) { this.uploader.addFilesToQueue(this.files); } diff --git a/src/directives/ng-file-select.ts b/src/directives/ng-file-select.ts index 95c01d75..b0486eac 100644 --- a/src/directives/ng-file-select.ts +++ b/src/directives/ng-file-select.ts @@ -87,6 +87,17 @@ export class NgFileSelectDirective implements OnChanges { }); } + if (this.options.maxSize > 0) { + this.files = [].filter.call(this.files, (f: any) => { + if (f.size <= this.options.maxSize) { + return true; + } + + this.onUploadRejected.emit({file: f, reason: UploadRejected.MAX_SIZE_EXCEEDED}); + return false; + }); + } + if (this.files.length) { this.uploader.addFilesToQueue(this.files); } diff --git a/src/services/ngx-uploader.ts b/src/services/ngx-uploader.ts index cfe5fcf8..e25c62db 100644 --- a/src/services/ngx-uploader.ts +++ b/src/services/ngx-uploader.ts @@ -28,15 +28,21 @@ export class NgUploaderService { }); }; - uploadFile(file: any): void { + uploadFile(file: File): void { let xhr = new XMLHttpRequest(); - let form = new FormData(); + let payload: FormData | File; - Object.keys(this.opts.data).forEach(k => { - form.append(k, this.opts.data[k]); - }); + if (this.opts.multipart) { + let form = new FormData(); + Object.keys(this.opts.data).forEach(k => { + form.append(k, this.opts.data[k]); + }); - form.append(this.opts.fieldName, file, file.name); + form.append(this.opts.fieldName, file, file.name); + payload = form; + } else { + payload = file; + } let uploadingFile = new UploadedFile( this.generateRandomIndex(), @@ -107,6 +113,10 @@ export class NgUploaderService { xhr.open(this.opts.method, this.opts.url, true); xhr.withCredentials = this.opts.withCredentials; + if (this.opts.filenameHeader) { + xhr.setRequestHeader(this.opts.filenameHeader, file.name); + } + if (this.opts.customHeaders) { Object.keys(this.opts.customHeaders).forEach((key) => { xhr.setRequestHeader(key, this.opts.customHeaders[key]); @@ -120,7 +130,7 @@ export class NgUploaderService { this._beforeEmitter.emit(uploadingFile); if (!uploadingFile.abort) { - xhr.send(form); + xhr.send(payload); } else { this.removeFileFromQueue(queueIndex); }