feat(core/file-input): add accept input to limit file mime type

gnucoop · May 25, 2020 · 6840281 · 6840281
1 parent fc2b066
commit 6840281
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/src/core/file-input/file-input.html b/src/core/file-input/file-input.html
@@ -23,4 +23,4 @@
     </div>
   </ng-template>
 </div>
-<input #nativeInput name="" aria-label="file input" type="file" (change)="onSelectFile()">
+<input #nativeInput [accept]="accept" name="" aria-label="file input" type="file" (change)="onSelectFile()">
diff --git a/src/core/file-input/file-input.ts b/src/core/file-input/file-input.ts
@@ -102,6 +102,8 @@ export class AjfFileInput implements ControlValueAccessor {
   readonly fileIcon: SafeResourceUrl;
   readonly removeIcon: SafeResourceUrl;
 
+  @Input() accept: string;
+
   private _value: any;
   get value(): any {
     return this._value;
@@ -114,7 +116,9 @@ export class AjfFileInput implements ControlValueAccessor {
       if (value.length === 1) {
         this._processFileUpload(value[0]);
       }
-    } else if (value == null || isAjfFile(value)) {
+    } else if (
+        value == null ||
+        (isAjfFile(value) && isValidMimeType((value as AjfFile).type, this.accept))) {
       this._value = value;
       this._valueChange.emit(this._value);
       this._cdr.detectChanges();
@@ -145,7 +149,7 @@ export class AjfFileInput implements ControlValueAccessor {
 
   onSelectFile(): void {
     const files = this._nativeInput.nativeElement.files;
-    if (files == null || files.length !== 1) {
+    if (files == null || files.length !== 1 || files[0]) {
       return;
     }
     this._processFileUpload(files[0]);
@@ -179,6 +183,9 @@ export class AjfFileInput implements ControlValueAccessor {
   private _processFileUpload(file: File): void {
     const reader = new FileReader();
     const {name, size, type} = file;
+    if (!isValidMimeType(type, this.accept)) {
+      return;
+    }
     reader.onload = (e: ProgressEvent<FileReader>) => {
       const content = reader.result;
       if (typeof content !== 'string') {
@@ -206,6 +213,20 @@ function isAjfFile(value: any): boolean {
   return JSON.stringify(keys) === ajfFileKeys;
 }
 
+function isValidMimeType(mimeType: string, accept: string): boolean {
+  if (accept == null) {
+    return true;
+  }
+  let terminate = true;
+  if (accept.endsWith('*')) {
+    accept = accept.slice(0, accept.length - 1);
+    terminate = false;
+  }
+  const regExStr = '^' + accept + (terminate ? '$' : '');
+  const regEx = new RegExp(regExStr);
+  return regEx.test(mimeType);
+}
+
 export const fileIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwM' +
     'C9zdmciIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCIgcHJl' +
     'c2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+PHBhdGggZD0iTTI4MyAxMDNjLTE3LjcgMi40LTMzLjkgMTM' +

diff --git a/tools/public_api_guard/core/file-input.d.ts b/tools/public_api_guard/core/file-input.d.ts
@@ -16,6 +16,7 @@ export declare class AjfFileInput implements ControlValueAccessor {
     _filePreviewChildren: QueryList<AjfFilePreview>;
     _nativeInput: ElementRef<HTMLInputElement>;
     _onTouched: () => any;
+    accept: string;
     readonly fileIcon: SafeResourceUrl;
     readonly removeIcon: SafeResourceUrl;
     get value(): any;
@@ -29,7 +30,7 @@ export declare class AjfFileInput implements ControlValueAccessor {
     resetValue(): void;
     triggerNativeInput(): void;
     writeValue(value: any): void;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<AjfFileInput, "ajf-file-input", never, { "value": "value"; }, { "valueChange": "valueChange"; }, ["_dropMessageChildren", "_filePreviewChildren"], ["[ajfDropMessage]", "[ajfFilePreview]"]>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<AjfFileInput, "ajf-file-input", never, { "accept": "accept"; "value": "value"; }, { "valueChange": "valueChange"; }, ["_dropMessageChildren", "_filePreviewChildren"], ["[ajfDropMessage]", "[ajfFilePreview]"]>;
     static ɵfac: i0.ɵɵFactoryDef<AjfFileInput, never>;
 }