NgxFileUp

File uploading plugin for AngularX applications.

Install

Run npm i ngx-file-up --save to install and save as dependency.

Import

Add import { NgxFileUpModule } from 'ngx-file-up' to your app module. Then add NgxFileUpModule to ng module imports.

Options

Directives

| 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 |

Events

| Event | Type | Description | | ---------------------- | ------------------------ | ------------------------------------------------------------------------ | | (ngxTriggerUpload) | EventEmitter<FileList> | Event handler to emit selected files when the "Upload" button is clicked | | (ngxTriggerSelected) | EventEmitter<FileList> | Event handler to emit selected files when files are selected |

Usage

Add this to HTML file.

<ngx-file-up></ngx-file-up>

[ngxTriggerReset]

app.component.html

<div>
  <ngx-file-up
    [prompt]="'Upload Files Here'"
    [promptAllow]="true"
    [selectBtn]="'Choose File(s)'"
    [uploadBtn]="'Submit'"
    [multiple]="true"
    [uploadBtnAllow]="true"
    [types]="'.pdf, .jpg, .png'"
    [ngxTriggerReset]="emitter"
  >
  </ngx-file-up>
  <br />
  <br />
  <div>This button will emit an event to remove all the selected files.</div>
  <br />
  <button class="ripple" (click)="resetFiles()" (ngxFileUpReset)="checkevent()">
    Reset Files
  </button>
</div>

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<any> = new EventEmitter();

  constructor() { }

  resetFiles() {
    this.emitter.emit();
  }

}

Events

app.component.html

<div>
  <ngx-file-up
    [prompt]="'Upload Files Here'"
    [promptAllow]="true"
    [selectBtn]="'Choose File(s)'"
    [uploadBtn]="'Submit'"
    [multiple]="true"
    [uploadBtnAllow]="true"
    [types]="'.pdf, .jpg, .png'"
    [ngxTriggerReset]="emitter"
    (ngxTriggerSelected)="triggerOnSelected($event)"
    (ngxTriggerUpload)="triggerOnUpload($event)"
  >
  </ngx-file-up>
  <br />
  <br />
  <div>This button will emit an event to remove all the selected files.</div>
  <br />
  <button class="ripple" (click)="resetFiles()" (ngxFileUpReset)="checkevent()">
    Reset Files
  </button>
</div>

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<any> = new 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

Credit goes to "bjsawyer" for creating "mat-file-upload"