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"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FileInputAccessorModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
2. You can use FormControl and NgModel with your own file input.
<!--file-upload.component.html--> <form> <!--Reactive form control--> <input type="file" multiple [formControl]="fileControl"> </form> <form> <!--Template form control, using model changes to trigger upload--> <input type="file" multiple name="templateFileUploadControl" [ngModel]="modelChangesFiles" (ngModelChange)="onFileInputChange($event)"> </form> <form> <!--Template form control, upload is manually triggered--> <input type="file" multiple [(ngModel)]="manualChangesFiles" name="templateFileUploadControl2"> <button type="button" (click)="submitFiles()">Click to upload</button> </form>
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.