File uploading plugin for AngularX applications.
npm install ngx-file-upFile uploading plugin for AngularX applications.
Run npm i ngx-file-up --save to install and save as dependency.
Add import { NgxFileUpModule } from 'ngx-file-up' to your app module.
Then add NgxFileUpModule to ng module imports.
| Option | Type | Default Val | Description |
| ----------------- | ------------ | ------------ | --------------------------------------------------- |
| [prompt] | string | Select Files | Prompt message displayed before files select button |
| [promptAllow] | boolean | false | Hide or show prompt message |
| [selectBtn] | string | Select | The text inside files select button |
| [uploadBtn] | string | Upload | The text inside files upload button |
| [uploadBtnAllow] | boolean | true | Hide or show upload button |
| [multiple] | boolean | true | Allow multiple files |
| [types] | string | \.\ | The list of allowed file types |
| [ngxTriggerReset] | EventEmitter | | Event received as input to trigger plugin reset |
| Event | Type | Description |
| ---------------------- | ------------------------ | ------------------------------------------------------------------------ |
| (ngxTriggerUpload) | EventEmitter | Event handler to emit selected files when the "Upload" button is clicked |
| (ngxTriggerSelected) | EventEmitter | Event handler to emit selected files when files are selected |
Add this to HTML file.
``html`
app.component.html
`html`
[promptAllow]="true"
[selectBtn]="'Choose File(s)'"
[uploadBtn]="'Submit'"
[multiple]="true"
[uploadBtnAllow]="true"
[types]="'.pdf, .jpg, .png'"
[ngxTriggerReset]="emitter"
>
This button will emit an event to remove all the selected files.
app.component.ts
`
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@Output() emitter: EventEmitter
constructor() { }
resetFiles() {
this.emitter.emit();
}
}
`
app.component.html
`html`
[promptAllow]="true"
[selectBtn]="'Choose File(s)'"
[uploadBtn]="'Submit'"
[multiple]="true"
[uploadBtnAllow]="true"
[types]="'.pdf, .jpg, .png'"
[ngxTriggerReset]="emitter"
(ngxTriggerSelected)="triggerOnSelected($event)"
(ngxTriggerUpload)="triggerOnUpload($event)"
>
This button will emit an event to remove all the selected files.
app.component.ts
`
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@Output() emitter: EventEmitter
constructor() { }
// console list of files selected
triggerOnSelected(files?: FileList) {
console.log(files);
}
// console list of files selected on upload click
triggerOnUpload(files?: FileList) {
console.log(files);
}
resetFiles() {
this.emitter.emit();
}
}
``
Credit goes to "bjsawyer" for creating "mat-file-upload"