// app.module.ts
import { NgUploaderModule } from 'ngx-uploader';
...
@NgModule({
  ...
  imports: [
    NgUploaderModule
  ],
  ...
})

// demo.component.ts
import { Component, NgZone, Inject } from '@angular/core';
import { NgUploaderOptions } from 'ngx-uploader';

@Component({
  selector: 'demo',
  templateUrl: 'demo.component.html'
})
export class DemoComponent {
  options: NgUploaderOptions;
  response: any;
  hasBaseDropZoneOver: boolean;

  constructor(@Inject(NgZone) private zone: NgZone) {
    this.options = new NgUploaderOptions({
      url: 'http://api.ngx-uploader.com/upload',
      autoUpload: true,
      calculateSpeed: true
    });
  }

  handleUpload(data: any) {
    setTimeout(() => {
      this.zone.run(() => {
        this.response = data;
        if (data && data.response) {
          this.response = JSON.parse(data.response);
        }
      });
    });
  }

  fileOverBase(e: boolean) {
    this.hasBaseDropZoneOver = e;
  }
}

// advanced-demo.component.ts
import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';

@Component({
  selector: 'advanced-demo',
  templateUrl: 'advanced-demo.component.html'
})
export class AdvancedDemoComponent {
  options: NgUploaderOptions;
  response: any;
  sizeLimit: number = 1000000; // 1MB
  previewData: any;
  errorMessage: string;
  inputUploadEvents: EventEmitter<string>;

  constructor(@Inject(NgZone) private zone: NgZone) {
    this.options = new NgUploaderOptions({
      url: 'http://api.ngx-uploader.com/upload',
      filterExtensions: true,
      allowedExtensions: ['jpg', 'png'],
      maxSize: 2097152,
      data: { userId: 12 },
      autoUpload: false,
      fieldName: 'file',
      fieldReset: true,
      maxUploads: 2,
      method: 'POST',
      previewUrl: true,
      withCredentials: false
    });

    this.inputUploadEvents = new EventEmitter<string>();
  }

  startUpload() {
    this.inputUploadEvents.emit('startUpload');
  }

  beforeUpload(uploadingFile: UploadedFile): void {
    if (uploadingFile.size > this.sizeLimit) {
      uploadingFile.setAbort();
      this.errorMessage = 'File is too large!';
    }
  }

  handleUpload(data: any) {
    setTimeout(() => {
      this.zone.run(() => {
        this.response = data;
        if (data && data.response) {
          this.response = JSON.parse(data.response);
        }
      });
    });
  }

  handlePreviewData(data: any) {
    this.previewData = data;
  }
}

// advanced-demo.component.ts
import { Component, NgZone, Inject, EventEmitter } from '@angular/core';
import { NgUploaderOptions, UploadedFile, UploadRejected } from 'ngx-uploader';

@Component({
  selector: 'advanced-demo',
  templateUrl: 'advanced-demo.component.html'
})
export class AdvancedDemoComponent {
  options: NgUploaderOptions;
  response: any;
  sizeLimit: number = 1000000; // 1MB
  previewData: any;
  errorMessage: string;
  startUploadEvent: EventEmitter<string>;

  constructor(@Inject(NgZone) private zone: NgZone) {
    this.options = new NgUploaderOptions({
      url: 'http://api.ngx-uploader.com/upload',
      filterExtensions: true,
      allowedExtensions: ['txt', 'pdf'],
      maxSize: 2097152,
      data:{
        '@type': "File",
        "title": "My lorem.txt file",
        "file": {
          "data": "TG9yZW0gSXBzdW0u",
          "encoding": "base64",
          "filename": "lorem.txt",
          "content-type": "text/plain"
          }
        },
       customHeaders: {
         'Content-Type':'application/json',
         'Accept':'application/json'
      },
      autoUpload: false,
      plainJson: true,
      fieldName: 'file',
      fieldReset: true,
      maxUploads: 2,
      method: 'POST',
      previewUrl: true,
      withCredentials: false
    });

    this.startUploadEvent = new EventEmitter<string>();
  }

  startUpload() {
    this.startUploadEvent.emit("startUpload");
  }

  beforeUpload(ev : Event): void {
   
    let file: File =  ev.target['files'][0];
    let myReader: FileReader = new FileReader();

    myReader.onloadend = (e) => {
      let tmpB64String = myReader.result.split(',');
      this.options['data']['file']['data'] = tmpB64String[1] ;
      this.options['data']['file']['filename'] = file.name;
      this.options['data']['title'] = file.name;   
    }
    myReader.readAsDataURL(file);
  }

  handleUpload(data: any) {
    setTimeout(() => {
      this.zone.run(() => {
        this.response = data;
        if (data && data.response) {
          this.response = JSON.parse(data.response);
        }
      });
    });
  }

  handlePreviewData(data: any) {
    this.previewData = data;
  }
}