ng-file-upload-button

Installation:

npm install ng-file-upload-button

Example usage:

app.module.ts

``
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { FileUploadButtonComponent } from 'ng-file-upload-button';


@NgModule({
declarations: [
AppComponent,
FileUploadButtonComponent // Declare the component in your module
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

app.component.ts

`
import {Component, EventEmitter} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
readyState: string;
content: string;
error: string;
progress: number;
abort: EventEmitter = new EventEmitter();
}
`

app.component.html

`
(readyState)="readyState = $event"
(contentLoaded)="content = $event"
(progressPercentage)="progress = $event"
(error)="error = $event"
[abort]="abort"
[maxFileSize]="26214400"
btnClass="myButton"
[btnStyle]="{'font-weight': 'bold', 'text-decoration': 'underline'}">
Upload


Cancel

Ready State: {{readyState}}

{{error?.message}}