feat: add 'multiple' attribute

kukhariev · May 25, 2019 · a384eae · a384eae
1 parent a8ab72c
commit a384eae
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git a/src/app/directive-way/directive-way.component.html b/src/app/directive-way/directive-way.component.html
@@ -10,7 +10,6 @@
           [uploadx]="options"
           [uploadxAction]="control"
           (uploadxState)="onUpload($event)"
-          multiple
           style="display:none"
         />
       </label>

diff --git a/src/app/multiple-directive/multiple-directive.component.html b/src/app/multiple-directive/multiple-directive.component.html
@@ -3,11 +3,11 @@
     <div class="btn-col">
       <label class="upload-btn"
         >1
-        <input type="file" [uploadx]="options" multiple style="display:none" />
+        <input type="file" [uploadx]="options" style="display:none" />
       </label>
       <label class="upload-btn"
         >2
-        <input class="video" type="file" [uploadx]="options2" multiple style="display:none" />
+        <input class="video" type="file" [uploadx]="options2" style="display:none" />
       </label>
       <button class="btn red raised" (click)="uploadAll()">Upload All</button>
       <button class="btn red raised" (click)="cancelAll()">Cancel All</button>

diff --git a/src/app/on-push/on-push.component.html b/src/app/on-push/on-push.component.html
@@ -3,7 +3,7 @@
     <div class="btn-col">
       <label class="upload-btn"
         >+
-        <input type="file" uploadx multiple accept="image/*,video/*" style="display:none" />
+        <input type="file" uploadx accept="image/*,video/*" style="display:none" />
       </label>
       <button class="btn red raised" (click)="uploadAll()">Upload All</button>
       <button class="btn red raised" (click)="cancelAll()">Cancel All</button>

diff --git a/src/app/service-way/service-way.component.html b/src/app/service-way/service-way.component.html
@@ -3,7 +3,7 @@
     <div class="btn-col">
       <label class="upload-btn"
         >+
-        <input type="file" uploadx multiple accept="image/*,video/*" style="display:none" />
+        <input type="file" uploadx accept="image/*,video/*" style="display:none" />
       </label>
       <button class="btn red raised" (click)="uploadAll()">Upload All</button>
       <button class="btn red raised" (click)="cancelAll()">Cancel All</button>

diff --git a/src/uploadx/src/interfaces.ts b/src/uploadx/src/interfaces.ts
@@ -86,15 +86,26 @@ export interface UploaderOptions extends Pick<UploadItem, Exclude<keyof UploadIt
 export interface UploadxOptions extends UploaderOptions {
   /**
    * Provide a user-defined class to support another upload protocol or to extend an existing one.
+   * @defaultValue UploadX
    */
   uploaderClass?: new (f: File, options: UploaderOptions) => Uploader;
   /**
    * Set the maximum parallel uploads
+   * @defaultValue 2
    */
   concurrency?: number;
   /**
    * Automatically start upload when files added
+   * @defaultValue true
    */
   autoUpload?: boolean;
-  allowedTypes?: any;
+  /**
+   * File types the user can pick from the file input
+   */
+  allowedTypes?: string;
+  /**
+   * Add 'multiple' attribute
+   * @defaultValue true
+   */
+  multiple?: boolean;
 }
diff --git a/src/uploadx/src/uploadx.directive.ts b/src/uploadx/src/uploadx.directive.ts
@@ -33,14 +33,16 @@ export class UploadxDirective implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    if (this.uploadx) {
-      if (this.uploadx.allowedTypes) {
-        this.renderer.setAttribute(
-          this.elementRef.nativeElement,
-          'accept',
-          this.uploadx.allowedTypes
-        );
-      }
+    if (!this.uploadx || this.uploadx.multiple !== false) {
+      this.renderer.setAttribute(this.elementRef.nativeElement, 'multiple', '');
+    }
+
+    if (this.uploadx && this.uploadx.allowedTypes) {
+      this.renderer.setAttribute(
+        this.elementRef.nativeElement,
+        'accept',
+        this.uploadx.allowedTypes
+      );
     }
     this.uploadxState.emit(this.uploadService.events);
     this.listenerFn = this.renderer.listen(