ngx-file-upload example with <input type="file">

file-upload.component.html

<div class="border rounded bg-light p-5">
  <form class="form mb-0">
    <div class="form-group">
      <p><strong>Select files to upload:</strong></p>
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFile" ngxFileSelect [uploader]="uploader" multiple>
        <label class="custom-file-label" for="customFile">Choose file</label>
      </div>
    </div>

    <p><strong>Upload queue: {{ uploader?.queue?.length }}</strong></p>
    <div class="list-group mb-4">
      <div class="list-group-item text-muted" *ngIf="uploader?.queue?.length === 0">Queue empty. Please select files to be uploaded.</div>
      <div class="list-group-item" *ngFor="let item of uploader?.queue">
        <div class="d-flex justify-content-between align-items-center">
          <header class="flex-fill">
            <strong>{{ item?.file?.name }}</strong><small class="text-muted pl-2">{{ item?.file?.size/1024/1024 | number:'.2' }} MB</small><br>
            <ngb-progressbar [value]="item.progress" [animated]="item.isUploading" [striped]="item.isUploading" [type]="item.isUploading ? 'warning' : 'success'"></ngb-progressbar>
            <small *ngIf="item.isSuccess || item.isCancel || item.isError">
              status:
              <span *ngIf="item.isSuccess" class="text-success">success</span>
              <span *ngIf="item.isCancel" class="text-muted">cancelled</span>
              <span *ngIf="item.isError" class="text-danger">error</span>
            </small>
          </header>
          <div class="btn-group ml-3">
            <button class="btn btn-sm btn-success" [disabled]="item.isReady || item.isUploading || item.isSuccess" (click)="item.upload()">Upload</button>
            <button class="btn btn-sm btn-warning" [disabled]="!item.isUploading" (click)="item.cancel()">Cancel</button>
            <button class="btn btn-sm btn-danger" [disabled]="!item.isUploading" (click)="item.remove()">Remove</button>
          </div>
        </div>

      </div>
    </div>

    <div class="form-group text-right mb-0">
      <button type="button" class="btn btn-success mr-1" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">Upload All</button>
      <button type="button" class="btn btn-warning mr-1" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">Cancel All</button>
      <button type="button" class="btn btn-danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">Remove All</button>
    </div>
  </form>
</div>

file-upload.component.ts

import { Component } from '@angular/core';
import { NgxFileUploader } from 'ngx-file-upload';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  public uploader: NgxFileUploader;

  constructor() {
    this.uploader = new NgxFileUploader({
      url: 'https://ngx-file-upload.herokuapp.com/api',
    });
  }
}