Update to Angular 20

In addition to updating the library version to Angular 20, two new validators were added:

• minFileCount and maxFileCount. With these validators, you can now limit the number of files that can be uploaded for the multiple upload input.

Here is the example:

In the .ts file we added the new validators:

this.demoForm = this.formBuilder.group({
.....
multiplefile: [
 '',
  [
    FileValidator.minFileCount(this.minFiles),
    FileValidator.maxFileCount(this.maxFiles)
   ]
  ]
})

And in the HTML we just added this:

@if (multiplefile?.hasError('minFileCount')) {
  <mat-error>
    You need at least {{minFiles}} uploaded file
  </mat-error>
}
@if (multiplefile?.hasError('maxFileCount')) {
  <mat-error>
    You can have max {{maxFiles}} uploaded file
  </mat-error>
}

You can check all the example code here.

Fix: Aria-label

Added integration between label and input, this fixed accessibility error related to the aria-label

Update to Angular 19

Apart from updating the library version to Angular 19, some new improvements were also added:

• You can add an image preview for a file and multiple files using the public property previewUrls.
  Note: You'll need to add your own custom CSS to control how the previews are displayed, or use the one found in the example at the end of the release.

• When you upload a file that is not an img, a default icon is set, the icon can be customized in the defaultIconBase64 property, you have to pass a base 64 img, example: [defaultIconBase64]="'data:image/svg+xml;base64,PHN2ZyB.....'"

• When uploading multiple files, you can delete one file at a time and if you want to delete all of them, you must use the clear input.

• In the input of multiple files now when you have files uploaded and you click on it again, it will push a new file to the array instead of resetting It.

Example img:

Here you have the code details of how to use them:
https://github.com/daemons88/ngx-custom-material-file-input/blob/main/projects/demo/src/app/app.component.html
https://github.com/daemons88/ngx-custom-material-file-input/blob/main/projects/demo/src/app/app.component.css

Update to Angular 18

The library was updated to Angular 18, and was added a new validator to validate using mime types: acceptedMimeTypes, this can be used like this:

ts

export class AppComponent {
  private readonly validFileTypes = ['image/jpeg', 'image/png'];
  
  constructor(private formBuilder: FormBuilder) {
    this.demoForm = this.formBuilder.group({
      basicfile: [
        '',
        [
          Validators.required,
          FileValidator.acceptedMimeTypes(this.validFileTypes),
        ],
      ],
    });
  }

  get basicfile() {
    return this.demoForm.get('basicfile');
  }
}

html

<form [formGroup]="demoForm">
    <mat-form-field>
      <mat-label>Basic input file</mat-label>
      <ngx-mat-file-input
        #fileInput
        formControlName="basicfile"
      ></ngx-mat-file-input>
      <button
        mat-icon-button
        matSuffix
        *ngIf="!fileInput.empty"
        (click)="fileInput.clear($event)"
      >
        <mat-icon>clear</mat-icon>
      </button>
      <mat-icon matSuffix *ngIf="fileInput.empty">folder</mat-icon>
      <mat-error *ngIf="this.basicfile?.hasError('acceptedMimeTypes')">
        <p>Accepted MIME types: {{  this.basicfile?.getError("acceptedMimeTypes").validTypes.join(', ') }}</p>
      </mat-error>
    </mat-form-field>
  </form>

The complete example is here

Update to Angular 17

The library was updated to Angular 17.

Update to Angular 16

The library was updated to Angular 16.

Update to Angular 15

The library was updated to Angular 15.

Since the update, the input is darker, and the placeholder that was used before is not visible because a mat-label must be used. Here is an example of use at the end of the file.

Base ngx-custom-material-file-input in angular 14

This project is a copy of ngx-material-file-input, this was made from angular 14 as a new project, only what was necessary was added and it is pending the update to angular 15 which was the main objective of this copy.

Additionally, this version does not give more vulnerability warnings.