import { WebUploaderModule, WebUploaderConfig, Options, OptionsPick, OptionsThumb } from 'ngx-webuploader';
 
@NgModule({
  imports: [
    BrowserModule,
    WebUploaderModule.forRoot(<WebUploaderConfig>{
      // 全局默认Options配置
      options: <Options>{
          swf: './assets/webuploader-0.1.5/Uploader.swf',
          server: '/fileupload'
      },
      // webuploader的存储路径
      path: './assets/webuploader-0.1.5/',
      // 依赖库
      dependentLib: './assets/zepto.min.js'
    }
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit, ViewEncapsulation, ElementRef } from '@angular/core';
import { WebUploaderComponent, File, FileStatus } from 'ngx-webuploader';
 
// 注意：声明$有效
declare const $: any;
 
@Component({
    selector: 'demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class DemoComponent {
    onReady(uploader: WebUploaderComponent) {
        let $list = $('#thelist'),
            state = 'pending',
            $btn = $('#ctlBtn');
 
        // 注意：这里必须使用 uploader.Instance 来表示 WebUpload真实的实例对象。
        // 后续所有操作同官网完全一样，可以参数官网
        uploader.Instance
            // 当有文件添加进来的时候
            .on('fileQueued', (file: File) => {
                $list.append( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                '</div>' );
            })
            // 文件上传过程中创建进度条实时显示。
            .on('uploadProgress', (file: File, percentage: number) => {
                let $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');
 
                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
                }
 
                $li.find('p.state').text('上传中');
 
                $percent.css( 'width', percentage * 100 + '%' );
            })
            .on('uploadSuccess', (file: File) => {
                $( '#'+file.id ).find('p.state').text('已上传');
            })
            .on('uploadError', (file: File) => {
                $( '#'+file.id ).find('p.state').text('上传出错');
            })
            .on('uploadComplete', (file: File) => {
                $( '#'+file.id ).find('.progress').hide();
            })
            .on('all', (type: string) => {
                if ( type === 'startUpload' ) {
                    state = 'uploading';
                } else if ( type === 'stopUpload' ) {
                    state = 'paused';
                } else if ( type === 'uploadFinished' ) {
                    state = 'done';
                }
 
                if ( state === 'uploading' ) {
                    $btn.text('暂停上传');
                } else {
                    $btn.text('开始上传');
                }
            })
        ;
 
        $btn.on( 'click', () => {
            if ( state === 'uploading' ) {
                uploader.Instance.stop();
            } else {
                uploader.Instance.upload();
            }
        });
    }
 
    onDestroy() {
        console.log('onDestroy');
    }
}

WebUploaderModule.forRoot(<WebUploaderConfig>{
    options: <Options>{
        swf: './assets/webuploader-0.1.5/Uploader.swf',
        server: '/fileupload'
    },
    path: './assets/webuploader-0.1.5/',
    dependentLib: './assets/zepto.min.js',
    // hook 接收的是一个Promise对象，有且只有一个 WebUpload 参数。
    hook(webUploader: any): Promise<any> {
        return new Promise<any>(resolve => {
            webUploader.Uploader.register({
                'add-file': 'addFiles'
            }, {
                addFiles: (files: File[]) => {
                    console.log('from hook', files)
                }
            });
        });
    }
})