使用dropzone和Angular 2的簡單方法

Question

我有點迷路了SystemJS和NGModules（我只是按照指示，讓它工作）。

在dropzone的情況下，我試圖添加dropzone.js/CSS作爲一個腳本在我head，在我的表單中添加的類dropzone，但它不工作，不產生懸浮窗...

任何人都可以告訴我如何在Angular 2（最終版本）中實現Dropzone嗎？

Answer 1

這裏是一個小部件我裹在Dropzone.js：

首輪

NPM安裝--save懸浮窗

import { Component, AfterViewInit, EventEmitter, OnDestroy } from '@angular/core'; 
import { Output } from '@angular/core/src/metadata/directives'; 

let Dropzone = require('../../../node_modules/dropzone/dist/dropzone-amd-module'); 

@Component({ 
    selector: 'hsr-dropzone', 
    templateUrl: 'dropzone.component.html', 
    styleUrls: ['dropzone.component.scss'] 
}) 
export class DropzoneComponent implements AfterViewInit, OnDestroy { 
    @Output() filesUploading: EventEmitter<File[]> = new EventEmitter<File[]>(); 
    // TODO: acceptedFiles option as input 

    dropzone; 

    constructor() { 
    } 

    get fileDropped(): boolean { 
    if (this.dropzone) { 
     return this.dropzone.files.length > 0; 
    } 
    return false; 
    } 

    ngAfterViewInit() { 
    this.dropzone = new Dropzone('div#my_dropzone', { 
     url: (files) => { 
     this.filesUploading.emit(files); 
     }, 
     autoProcessQueue: false, 
     uploadMultiple: true, 
     parallelUploads: 20, 
     hiddenInputContainer: '#dropzone-drop-area', 
     dictDefaultMessage: '', 
     maxFiles: 20, 
     acceptedFiles: 'image/*', 
     clickable: '#dropzone-drop-area', 
     previewsContainer: '#dropzone-drop-area', 
     previewTemplate: ` 
<div class="dz-preview dz-file-preview"> 
    <div class="dz-details"> 
    <img data-dz-thumbnail/> 
    </div> 
</div> 
` 
    }); 
    this.dropzone.autoDiscover = false; 

    this.dropzone.on('addedfile', (file) => { 
     /*file.previewElement.addEventListener('click',() => { 
     this.dropzone.removeFile(file); 
     });*/ 
    }); 
    this.dropzone.on('completemultiple', (files) => { 
     this.dropzone.removeAllFiles(); 
    }); 
    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead 
    // of the sending event because uploadMultiple is set to true. 
    this.dropzone.on('sendingmultiple',() => { 
     console.log('sending!!!!!!!'); 
    }); 
    } 

    ngOnDestroy() { 
    this.dropzone.disable(); 
    } 

    upload() { 
    this.dropzone.processQueue(); 
    } 
} 

模板：

<div class="dropzone-container" id="my_dropzone"> 
    <div id="dropzone-drop-area" class="dropzone-drop-area"> 
    <div *ngIf="!fileDropped" class="centered noselect clickthrough"> 
     <ng-content></ng-content> 
    </div> 
    </div> 
</div> 

<button md-raised-button style="float: right;" *ngIf="fileDropped" (click)="upload()"> 
    <i class="fa fa-upload fa-lg"></i> 
</button> 

STYLES：

.dropzone-container { 
    width: 100%; 
} 

.dropzone-drop-area { 
    border: dashed 3px grey; 
    width: 100%; 
    min-height: 120px; 
    box-sizing: border-box; 
    padding: 6px; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    cursor: pointer; 
    position: relative; 
    &:hover { 
    color: darkorange; 
    border-color: darkorange; 
    } 
} 

我真的希望有所幫助。