ngx-file-input v1.0.7

NGX File Input

Lightweight component which helps to utilise native capabilities of HTML5 File Input. Also provides custom Angular validation for file size, and ability to set up native properties.

• Demo
• Installation
• Setup
• Usage
• Model and Options
• Styling

Demo

Click here

Installation

npm i --save ngx-file-input

Setup

Simply import NgxFileInputModule from the library to your app.module.ts

import { NgxFileInputModule } from 'ngx-file-input';

@NgModule({
  imports: [
    NgxFileInputModule
  ],
  providers: []
})
export class AppModule {
}

Usage

Use component directly in HTML code:

<ngx-file-input [(ngModel)]="files"></ngx-file-input>

Notice that even though the component uses 2-way databinding you can't set the value through ngModel due to limitations of HTML5 File Input.

You can also use it in the form:

<form>
  <div>
    <label for="file-input">Files:</label>
    <ngx-file-input #file="ngModel" required [(ngModel)]="files" [id]="'file-input'" [options]="fileOptions"
                    name="file"></ngx-file-input>
  </div>
</form>

Model and Options

Component uses validation automatically when inside of form so you don't need to listen for validity in this case. Custom validator checks for size (if specified) and returns the following object:

{
  fileValidation: {
    [filename]: {
      size: true
    }
  }
}

FileInputOptions

Styling

This library provides no styling. It basically means that there are no unnecessary dependencies which you wouldn't like to see in your project. You can apply any styling you want, e.g. for demo environment there's used Fomantic UI.