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: ngx-input-file@1.0.4.
- Preview of the file
- Drag and drop zone
- Responsive
npm install ngx-input-file --saveimport { 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"
]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. |
| 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). |
<input-file
placeholder="My files"
[(ngModel)]="myModel">
</input-file>
<input-file
placeholder="Pictures"
formControlName="myField">
</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: 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(...)
}You're welcome, please fork this repository to a make pull request.
Clone this repository and run npm start.