ngx-custom-material-file-input v21.0.0 Release Notes 🚀

This major release aligns the library with the latest Angular standards, introduces a useful new feature, and brings significant performance and maintainability enhancements.

Note: v21.0.1/2/3 just updated the readme.

🚨 Breaking Changes
This version includes a significant architectural change to align with the modern Angular ecosystem.

Standalone Components Only
This library now exclusively supports Angular Standalone Components. Support for the older NgModules has been entirely removed, as their usage is now deprecated in Angular.

Action Required
Users must update their application's imports to use the standalone component directly, removing any module imports.

✨ New Features
checkDuplicates Input Property
When it is added alongside the multiple input, the component will automatically skip any files a user attempts to upload that are already in the selection, by default it is false

⚙️ Enhancements and Performance

Official Angular 21 Support
The library has been successfully updated and tested to officially support Angular 21.

Core Refactoring
A substantial refactoring effort was undertaken in the main library component and its associated tests. This work was focused on improving readability, enhancing performance, and making the codebase more resilient and easier to maintain.

Example Project Added Performance Improvement
The example project's HTML templates have been updated to utilise the trackBy function. This is a best practice for Angular change detection and provides a significant improvement in rendering performance, especially when handling a large number of files.

💬 Feedback and Support
Should you encounter any bugs, have suggestions, or run into any issues while using this last version, please don't hesitate to create an issue in the project's GitHub Issues tracker. Your feedback is highly appreciated!

As a final note, you have available here the examples of use

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.

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

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

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

The library was updated to Angular 17.

The library was updated to Angular 16.

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.

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.