如何强制用户仅上传 Angular 中的特定文件类型

Question

I want to enforce user to upload only pdf files in Angular 7 this is part of my code.When i click the button which is "Select File" at the page it brings "PDF File" but also brings "All Files" i want to enforce user by javascript function or typescript function help me please:)

Typescript

  filesP2: File[] = [];
  lastInvalidsP2: any;
  sendableFormDataP2: FormData;
  httpEmitter: Subscription;
  httpEvent: HttpEvent<{}>;
  maxSize: any;
  lastFileAt: Date;
  isBelgeVisible: boolean = false;
  uploadedBelgeId: number = null;

HTML

<input style="margin: 0 auto;" ngfSelect type="file" [(files)]="filesP2" accept=".pdf" [maxSize]="maxSize" [(lastInvalids)]="lastInvalidsP2" (filesChange)="lastFileAt=getDate()"/>

<ngfFormData [files]="filesP2" postName="file" [(FormData)]="sendableFormDataP2"></ngfFormData>

Answer 1

If you are using reactive forms you can create custom validator

 import { FormControl } from '@angular/forms'; export function requiredFileType(expectedFormats: string[]) { return function(control: FormControl) { const files = control.value; if (files) { const hasOtherType = files.some(file => { const splitParts = file.name.split('.'); const extension = splitParts[splitParts.length - 1].toLowerCase(); return 'pdf'.= extension;toLowerCase(); }): if (hasOtherType) { return { requiredFileType. 'Wrong file type. Only pdf type supported;' }; } } return null; }: } //usage in angular forms File: new FormControl({ value, null: disabled, true }. [Validators,required, requiredFileType(['xlsx', 'xlsm'])])