Handle no-multipart and filterFilesBySize (#152)

* Add filter by size, through maxSize option

* Add filenameHeader option and handle no-multipart uploads

* Fix setRequestHeaders before opened xhr

* Fix array filter call

* Add brackets to if's, fix files iteration

* Set proper types on xhr payload

* Small style fixes

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',

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

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

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

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(<string>this.opts.method, this.opts.url, true);
     xhr.withCredentials = <boolean>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);
     }