Input Type File in Angular Material

By Arvind Rai, April 29, 2024

Up to the Angular Material 17, <input matInput> does not support input type file. We cannot use <input matInput type="file"> within <mat-form-field>.
If we still want to use input type file in Angular material application, we can go ahead with the combination of material and non-matreial input element.
To use input type file, we need to use the combination of <input matInput type="text"> and <input type="file" hidden> within <mat-form-field>.
Let us discuss in detail.

Hide Non-Material Input

To use matInput for file upload in Angular Material application, We can use combination of material and hidden non-material input text.
To hide file input, use hidden attribute.

<mat-form-field>
  <input matInput>
  <input type="file" hidden>
</mat-form-field>

Click Programmatically

We have two input elements. On the click of material input element, we will programmatically click non-material input element with the help of template variable. In this way, file dialog will open to select the file for upload.

<mat-form-field>
  <input matInput (click)="singleUpload.click()">
  <input type="file" hidden #singleUpload>
</mat-form-field>

Display Selected File

When we select file from file dialog from non-material input element, the selected file will not display on material input. We need to display it programmatically.
Use NgModel to bind the values taken from template variable. Now call a method on change or button click to upload the file.
Our complete code of <mat-form-field> will look like as below.

<mat-form-field>
  <mat-label>Click to browse file</mat-label>
  <button mat-icon-button matPrefix (click)="singleUpload.click()">
    <mat-icon>upload_file</mat-icon>
  </button>
  <input matInput (click)="singleUpload.click()" [(ngModel)]="singleUploadFile">
  <input type="file" hidden (change)="upload($event)" [(ngModel)]="singleUploadFile" #singleUpload>
</mat-form-field>

Input Type File with FormGroup

HTML code:

<mat-form-field>
  <mat-label>Click to browse file</mat-label>
  <button mat-icon-button matPrefix (click)="multiUpload.click()">
    <mat-icon>upload_file</mat-icon>
  </button>
  <input matInput [formControlName]="i" [value]="multiUpload.value" (click)="multiUpload.click()">
  <input [formControlName]="i" hidden type="file" id="file{{i}}" #multiUpload>
  <mat-error *ngIf="filesToUpload.controls[i].errors?.['required']" class="error">
    Select the file.
  </mat-error>
  <mat-error *ngIf="filesToUpload.controls[i].errors?.['inValidExt'] && !filesToUpload.controls[i].errors?.['required']" class="error">
    Invalid file extension.
  </mat-error>
</mat-form-field>

TS code:

uploadForm = this.formBuilder.group({
  filesToUpload: this.formBuilder.array([
    this.formBuilder.control('', [Validators.required, fileExtensionValidator(this.acceptedExtensions)])
  ])
});
get filesToUpload(): FormArray {
  return this.uploadForm.get('filesToUpload') as FormArray;
}

Download the code and run. Output screen will be as below.