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

Name (or directive) | Type | Description | Default Value --- | --- | --- | --- ngModel | File[] (array of Files, not FileList) | - | [] @Input() id | string | Id which is going to be set to native input (e.g. to be used with labels) | empty string @Input() options | FileInputOptions | Object with different validation and configuration properties (see props below) | - // - @Output() value | File[] | Returns File array whenever value of input changes | - @Output() validity | ValidationErrors | Returns Custom Validator Output | -

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

Name | Type | Description | Default Value --- | --- | --- | --- formats | string[] | Sets accept property of HTML5 File Input | [] size | number or string | Used for validation. Accepts value as number in bytes or string in natural language (e.g. 200kb, 2Mb, etc.) | 0 multiple | boolean | Sets multiple property of HTML5 File Input | false classes | string | Sets class property of HTML5 File Input | empty string

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.