// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxUploaderModule } from 'ngx-uploader';  @NgModule({   imports: [     BrowserModule,     NgxUploaderModule   ],   declarations: [ AppComponent ] }) export class AppModule {}

// shared.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NgxUploaderModule } from 'ngx-uploader'; ...  @NgModule({   imports: [     CommonModule,     NgxUploaderModule,     ...   ],   exports: [     CommonModule,     NgxUploaderModule,     ...   ],   ... }) export class SharedModule { }

// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { SharedModule } from './shared.module';  @NgModule({   imports: [     BrowserModule,     SharedModule   ],   declarations: [ AppComponent ] }) export class AppModule {} 

export interface UploaderOptions {   concurrency: number; // number of files uploaded at the same time   allowedContentTypes?: string[]; // content types allowed (default *)   maxUploads?: number; // max number of files the user can upload }  export interface UploadProgress {   status: UploadStatus; // current status of upload for specific file (Queue | Uploading | Done | Canceled)   data?: {     percentage: number; // percentage of upload already completed     speed: number; // current upload speed per second in bytes     speedHuman: string; // current upload speed per second in human readable form,     eta: number; // estimated time remaining in seconds     etaHuman: string; // estimated time remaining in human readable format   }; }  export interface UploadFile {   id: string; // unique id of uploaded file instance   fileIndex: number; // fileIndex in internal ngx-uploader array of files   lastModifiedDate: Date; // last modify date of the file (Date object)   name: string; // original name of the file   size: number; // size of the file in bytes   type: string; // mime type of the file   form: FormData; // FormData object (you can append extra data per file, to this object)   progress: UploadProgress;   response?: any; // response when upload is done (parsed JSON or string)   responseStatus?: number; // response status code when upload is done   responseHeaders?: { [key: string]: string }; // response headers when upload is done }  // output events emitted by ngx-uploader export interface UploadOutput {   type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'removed' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop';   file?: UploadFile;   nativeFile?: File; // native javascript File object, can be used to process uploaded files in other libraries }  // input events that user can emit to ngx-uploader export interface UploadInput {   type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll';   url?: string; // URL to upload file to   method?: string; // method (POST | PUT)   id?: string; // unique id of uploaded file   fieldName?: string; // field name (default 'file')   fileIndex?: number; // fileIndex in internal ngx-uploader array of files   file?: UploadFile; // uploading file   data?: { [key: string]: string | Blob }; // custom data sent with the file   headers?: { [key: string]: string }; // custom headers   concurrency?: number; // concurrency of how many files can be uploaded in parallel (default is 0 which means unlimited)   withCredentials?: boolean; // apply withCredentials option }

onUploadOutput(output: UploadOutput): void { .... } else if (output.type === 'rejected' && typeof output.file !== 'undefined') {   // console.log(output.file.name + ' rejected'); } ...

startUpload(): void {   let token = this.myToken;  // <----  get token   const event: UploadInput = {     type: 'uploadAll',     url: 'http://ngx-uploader.com/upload',     method: 'POST',     headers: { 'Authorization': 'JWT ' + token },  // <----  set headers     data: { foo: 'bar' }   };    this.uploadInput.emit(event); }

import { Component, EventEmitter } from '@angular/core'; import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions } from 'ngx-uploader';  @Component({   selector: 'app-home',   templateUrl: 'app-home.component.html' }) export class AppHomeComponent {   options: UploaderOptions;   formData: FormData;   files: UploadFile[];   uploadInput: EventEmitter<UploadInput>;   humanizeBytes: Function;   dragOver: boolean;    constructor() {     this.options = { concurrency: 1, maxUploads: 3 };     this.files = []; // local uploading files array     this.uploadInput = new EventEmitter<UploadInput>(); // input events, we use this to emit data to ngx-uploader     this.humanizeBytes = humanizeBytes;   }    onUploadOutput(output: UploadOutput): void {     if (output.type === 'allAddedToQueue') { // when all files added in queue       // uncomment this if you want to auto upload files when added       // const event: UploadInput = {       //   type: 'uploadAll',       //   url: '/upload',       //   method: 'POST',       //   data: { foo: 'bar' }       // };       // this.uploadInput.emit(event);     } else if (output.type === 'addedToQueue'  && typeof output.file !== 'undefined') { // add file to array when added       this.files.push(output.file);     } else if (output.type === 'uploading' && typeof output.file !== 'undefined') {       // update current data in files array for uploading file       const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);       this.files[index] = output.file;     } else if (output.type === 'removed') {       // remove file from array when removed       this.files = this.files.filter((file: UploadFile) => file !== output.file);     } else if (output.type === 'dragOver') {       this.dragOver = true;     } else if (output.type === 'dragOut') {       this.dragOver = false;     } else if (output.type === 'drop') {       this.dragOver = false;     }   }    startUpload(): void {     const event: UploadInput = {       type: 'uploadAll',       url: 'http://ngx-uploader.com/upload',       method: 'POST',       data: { foo: 'bar' }     };      this.uploadInput.emit(event);   }    cancelUpload(id: string): void {     this.uploadInput.emit({ type: 'cancel', id: id });   }    removeFile(id: string): void {     this.uploadInput.emit({ type: 'remove', id: id });   }    removeAllFiles(): void {     this.uploadInput.emit({ type: 'removeAll' });   } }