feat: add accepted files to virtual input 🌈

scttcper · May 21, 2018 · 4512727 · 4512727
1 parent 0376ea5
commit 4512727
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -36,12 +36,13 @@ Add droppable directive to element
 ```
 ## [Inputs]
 
-| name                 | type      | default      | description                                        |
-| -------------------- | --------- | ------------ | -------------------------------------------------- |
-| isClickable          | `boolean` | `true`       | prompt for files when clicked                      |
-| acceptsMultipleFiles | `boolean` | `true`       | allow multiple files dropped or selected           |
-| appendStatusClasses  | `boolean` | `true`       | append CSS class when files are dragged on element |
-| dragOverClass        | `string`  | `'dragover'` | class added when files are hovered over element    |
+| name                 | type             | default      | description                                                                                                        |
+| -------------------- | ---------------- | ------------ | ------------------------------------------------------------------------------------------------------------------ |
+| isClickable          | `boolean`        | `true`       | prompt for files when clicked                                                                                      |
+| acceptsMultipleFiles | `boolean`        | `true`       | allow multiple files dropped or selected                                                                           |
+| appendStatusClasses  | `boolean`        | `true`       | append CSS class when files are dragged on element                                                                 |
+| dragOverClass        | `string`         | `'dragover'` | class added when files are hovered over element                                                                    |
+| accept               | `string | false` | `false`      | limit accepted file types via MIME [see mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) |
 
 ## (Ouput)
 

diff --git a/src/lib/droppable.directive.ts b/src/lib/droppable.directive.ts
@@ -20,6 +20,8 @@ export class DroppableDirective
   @Input() isClickable = true;
   /** allow multiple files dropped or selected */
   @Input() acceptsMultipleFiles = true;
+  /** input limit accepted file types via MIME */
+  @Input() accept: string | false = false;
   /** append CSS class when files are dragged on element */
   @Input() appendStatusClasses = true;
   @Input() dragOverClass = 'dragover';
@@ -79,6 +81,7 @@ export class DroppableDirective
   ngOnChanges() {
     if (this.virtualInputElement) {
       this.setAcceptsMultipleFiles();
+      this.setAccepted();
     }
   }
 
@@ -89,16 +92,29 @@ export class DroppableDirective
       this.onVirtualInputElementChange.bind(this),
     );
     this.setAcceptsMultipleFiles();
+    this.setAccepted();
   }
 
   setAcceptsMultipleFiles() {
+    if (!this.acceptsMultipleFiles) {
+      this.virtualInputElement.removeAttribute('multiple');
+      return;
+    }
     this.virtualInputElement.setAttribute(
       'multiple',
       this.acceptsMultipleFiles.toString(),
     );
-    if (!this.acceptsMultipleFiles) {
-      this.virtualInputElement.removeAttribute('multiple');
+  }
+
+  setAccepted() {
+    if (!this.accept) {
+      this.virtualInputElement.removeAttribute('accept');
+      return;
     }
+    this.virtualInputElement.setAttribute(
+      'accept',
+      this.accept.toString(),
+    );
   }
 
   ngOnDestroy() {

diff --git a/src/lib/droppable.spec.ts b/src/lib/droppable.spec.ts
@@ -10,13 +10,15 @@ import { DroppableDirective } from './droppable.directive';
     (filesDropped)="handleFilesDropped($event)"
     [acceptsMultipleFiles]="acceptsMultipleFiles"
     [appendStatusClasses]="appendStatusClasses"
+    [accept]="accept"
   ></div>
   `,
 })
 export class TestComponent {
   @ViewChild('droppable') droppable: DroppableDirective;
   acceptsMultipleFiles = true;
   appendStatusClasses = true;
+  accept: string | false = '.jpg';
   files: File[] = [];
   handleFilesDropped(files: File[]) {
     this.files = files;
@@ -63,6 +65,34 @@ describe('Droppable', () => {
     tc.droppable.promptForFiles();
     expect(mock).toHaveBeenCalled();
   }));
+  it('should set multiple', async(() => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    const tc: TestComponent = fixture.debugElement.componentInstance;
+    expect(tc.droppable['virtualInputElement'].getAttribute('multiple')).toBe('true');
+  }));
+  it('should remove multiple', async(() => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    const tc: TestComponent = fixture.debugElement.componentInstance;
+    tc.acceptsMultipleFiles = false;
+    fixture.detectChanges();
+    expect(tc.droppable['virtualInputElement'].getAttribute('multiple')).toBe(null);
+  }));
+  it('should set accepted', async(() => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    const tc: TestComponent = fixture.debugElement.componentInstance;
+    expect(tc.droppable['virtualInputElement'].getAttribute('accept')).toBe('.jpg');
+  }));
+  it('should remove accepted', async(() => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    const tc: TestComponent = fixture.debugElement.componentInstance;
+    tc.accept = false;
+    fixture.detectChanges();
+    expect(tc.droppable['virtualInputElement'].getAttribute('accept')).toBe(null);
+  }));
   describe('handleDragover(event)', () => {
     let fakeEvent: any;