ngx-input-file

ngx-input-file is a module to replace the html element input file with Material Design.

Try it with Stackblitz!

For the previous version with bootstrap: [email protected].

Key features

• Preview of the file
• Drag and drop zone
• Responsive

Installation

npm install ngx-input-file --save

Basic Configuration

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputFileConfig, InputFileModule } from 'ngx-input-file';

const config: InputFileConfig = {};

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

export class MyModule {}

Please include material-design-icons in your angular.json:

"styles": [
    "node_modules/material-design-icons/iconfont/material-icons.css",
    "src/styles.scss"
]

Component Attributes

These settings will overide the configuration defined with forRoot() method.

Attribute	Type	Description
fileAccept	Input - string	The attribute accept of the html element input.
fileLimit	Input - number	The maximum files that the user can upload.
iconAdd	Input - string	The icon for add.
iconDelete	Input - string	The icon for delete.
iconFile	Input - string	The icon for file.
iconLink	Input - string	The icon for link.
linkEnabled	Input - boolean	Whether adding is url is enabled.
placeholderLink	Input - string	The placeholder for the link input.
sizeLimit	Input - number	The maximum size of the file (kB).
disabled	Input - boolean	Whether the component is disabled.
placeholder	Input - string	The placeholder of the component.
classAnimation	Input - string	The class of the image container which allow to animate the container when select or drop a file.
ngModel/formControlname	Array	Template driven or reactive form works.
acceptedFile	Output - InputFile	Triggered when a file is accepted.
deletedFile	Output - InputFile	Triggered when a file is deleted.
rejectedFile	Output - InputFile	Triggered when a file is rejected.

Configuration Attributes

Attribute	Type	Default	Description
classAnimation	string	'bounce-in'	The class of the image container which allow to animate the container when select or drop a file.
fileAccept	string	'*'	The attribute accept of the html element input.
fileLimit	number	1	The maximum files that the user can upload.
iconAdd	string	'add'	The icon for add.
iconDelete	string	'delete'	The icon for add.
iconFile	string	'insert_drive_file'	The icon for file.
iconLink	string	'link'	The icon for link.
linkEnabled	boolean	false	Whether adding is url is enabled.
placeholderLink	string	'Link'	The placeholder for the link input.
sizeLimit	number	null	The maximum size of the file (kB).

Example

<input-file
    placeholder="My files"
    [(ngModel)]="myModel">
</input-file>

<input-file
    placeholder="Pictures"
    formControlName="myField">
</input-file> 

Bonus

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: InputFile): Observable<YourClass> {
    const apiUrl = 'my-url';
    const formData = new FormData();
    formData.append('file', file.file, file.file.name);
    return this.http.post<YourClass>(apiUrl, formData).pipe(
        .catchError(...)
}

For developpers

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

Demonstration

Clone this repository and run npm start.