Breaking changes

Input file repository dropped.
See below how to upload a file.

ngx-input-file

ngx-input-file is a module to replace the html element input file and also allows you to upload files.
Style is based on Bootstrap File Input.

Key features

Preview of the file
Drag and drop zone
Responsive
Bootstrap 4 required.
Font Awesome 5 support

Installation

npm install ngx-input-file --save

Basic Configuration

import { NgModule } from '@angular/core';
import { InputFileModule } from 'ngx-input-file';


@NgModule({
    imports: [
        ... 
        InputFileModule,
        ...
    ],
    ...
})

export class MyModule {}

Import InputFileModule in your module.

Component Attributes

Attribute	Type	Description
inputId	string	The attribute identifier of the html element input.
inputAccept	string	The attribute accept of the html element input.
disableUpload	boolean	Default `false`. Hide the button upload.
inputMaxFiles	number	Default `1`. The maximum files that the user can upload.
minimal	boolean	Default `false`. If true, puts the input file to the minimal mode, a simple button browse without icon.
model	Array	The model.
textBrowse	string	Default `Browse`. The text of the button browse.
textFileSelected	string	Default `files selected`. The text when x files is selected.
textNoFile	string	Default `No file selected`. The text when no files is selected.
textRemove	string	Default `Remove`. The text of the button remove.
textUpload	string	Default `Upload`. The text of the button upload.
limitReached	EventEmitter	Triggered when `inputMaxFiles` is reached.
acceptedFile	EventEmitter	Triggered when a file is accepted.
rejectedFile	EventEmitter	Triggered when a file is rejected.
removedFile	EventEmitter	Triggered when a file is removed.
uploadFiles	EventEmitter	Triggered when the user click on the button upload.

Minimal Mode Attributes

Attribute	Type	Description
inputId	string	The attribute identifier of the html element input.
inputAccept	string	The attribute accept of the html element input.
model	Array	The model.
textBrowse	string	Default `Browse`. The text of the button browse.
acceptedFile	EventEmitter	Triggered when a file is accepted.
rejectedFile	EventEmitter	Triggered when a file is rejected.

Supported icons

The type is the mime type of the file.
The extension is a shortly example of the file extension. To add an other type, please open a issue.

Type	Extension
application/pdf	pdf
application/vnd.openxmlformats-officedocument.wordprocessingml.document	doc, docx, ...
application/zip	zip
default	any

Example

<input-file 
    inputId="images" 
    inputAccept=".docx,.pdf,image/*"
    [disableUpload]="true"
    inputMaxFiles="4" 
    [(model)]="inputFileModel"
    [textBrowse]="Rechercher"
    [textFileSelected]="'COMMON.FORM.FILES.SELECTED' | translate"
    [textNoFile]="'COMMON.FORM.FILES.NO' | translate"
    [textRemove]="'COMMON.REMOVE' | translate"
    (acceptedFile)="onAccept($event)"
    (removedFile)="onRemoveImage($event)">
</input-file>

Here's an example to post a file:

import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyRepository {

constructor(
    private http: HttpClient
) {}

public post(file: any): Observable<any> {
    const apiUrl = 'my-url';
    const formData = new FormData();
    formData.append('file', file.file, file.file.name);
    return this.http.post(apiUrl, formData)
        .map(res => <any>res);
}

IMPORTANT!

Icons is not packaged with the module.
Default path of file icons is assets/img with the extension .png.
Any help is welcome to package icons or configure the path and extension. You can pick icons free here.

For developpers

You're welcome, please fork this repository to a make pull request.

Demonstration

Clone this repository and run npm start.

Changelog

1.0.2

Drop font awesome 4 support to font awesome 5

1.0.1

Fix issue #3

cintolas / ngx-input-file