Press "Enter" to skip to content

An Angular Directive That Provides File Input Functionality Forms | FileInputAccessor

File Input Accessor is an Angular 4+ directive that provides file input functionality in Angular Forms.

file upload in angular, angular material file input, angular file upload demo example, angular 8 upload file to rest api

How to make use of it:

Install the package from npm:

npm i file-input-accessor

1. Import the FileInputAccessorModule.

import {BrowserModule} from '@angular/platform-browser';
 import {FileInputAccessorModule} from "file-input-accessor";

     declarations: [
     imports: [
     providers: [],
     bootstrap: [AppComponent]
 export class AppModule {}

2. You can use FormControl and NgModel with your own file input.


   <!--Reactive form control-->
   <input type="file" multiple [formControl]="fileControl">

   <!--Template form control, using model changes to trigger upload-->
   <input type="file" multiple name="templateFileUploadControl" [ngModel]="modelChangesFiles" (ngModelChange)="onFileInputChange($event)">

   <!--Template form control, upload is manually triggered-->
   <input type="file" multiple [(ngModel)]="manualChangesFiles" name="templateFileUploadControl2">
   <button type="button" (click)="submitFiles()">Click to upload</button>

angular 4+ file input accessor, FileInputAccessor Plugin/Github

See Demo And Download

Official Website(jwelker110): Click Here

This superior jQuery/javascript plugin is developed by jwelker110. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.