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";

 @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.

Related Posts

Searchable-Select-Dropdown

A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…

country-dropdown-with-flags

A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…

Autocomplete-and-Typeahead-Javascript-Library

Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…

Bootstrap-Notification-Message-Alert-Plugin

Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…

jquery-google-chart-plugin

jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…

free-vue-chart-library

Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…