Угловой 2 перетащить загрузки

Question

Я пытаюсь реализовать перетаскивание загрузки на угловые 2, похожее на это: http://bootsnipp.com/snippets/featured/bootstrap-drag-and-drop-upload

Поскольку я использую угловую 2 Я хочу использовать машинопись, а не JQuery , Я нашел библиотеку под названием ng2-file-upload, и я попытался реализовать функцию перетаскивания; однако я не могу заставить его работать. Это то, что у меня есть:

Upload.component.ts

Component({ 
    selector: 'upload', 
    templateUrl: 'app/components/upload/upload.component.html', 
    styleUrls: ['app/components/upload/upload.component.css'], 
providers: [ UploadService ] 
}) 
export class UploadComponent { 

public uploader:FileUploader = new FileUploader({url: URL}); 
    public hasBaseDropZoneOver:boolean = false; 
    public hasAnotherDropZoneOver:boolean = false; 

    public fileOverBase(e:any):void { 
     this.hasBaseDropZoneOver = e; 
    } 

    public fileOverAnother(e:any):void { 
     this.hasAnotherDropZoneOver = e; 
    } 
} 

upload.component.html

<section id="dropzone"> 
    <div class="panel panel-default"> 

     <div class="panel-body"> 

      <!-- Standar Form --> 
      <h4>Select files from your computer</h4> 
      <br> 
      <form enctype="multipart/form-data" id="js-upload-form"> 
       <div class="form-inline"> 
        <div class="form-group"> 
         <input type="file" name="files[]" multiple (change)="fileChangeEvent($event)"> 
        </div> 
        <button type="submit" class="btn btn-sm btn-primary" (click)="upload()">Upload files</button> 
       </div> 
      </form> 
</div> 
    </div> 



      <!-- Drop Zone --> 
      <h4>Or drag and drop files below</h4> 
     <br> 
      <!--<div class="upload-drop-zone" id="drop-zone">--> 
       <!--Just drag and drop files here--> 
      <!--</div>--> 
     <div ng2FileDrop 
      [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}" 
      (fileOver)="fileOverBase($event)" 
      class="well upload-drop-zone"> 
      Drop Files Here 
     </div> 
    </section> 

upload.component.css

.upload-drop-zone { 
    color: #ccc; 
    border-style: dashed; 
    border-color: #ccc; 
    line-height: 200px; 
    text-align: center 
} 
.another-file-over-class { 
    border: dashed 3px green; 
} 

Answer 1

Я думаю, вам не хватает связать загрузчик в html.

<div ng2FileDrop 
    [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}" 
    (fileOver)="fileOverBase($event)" 
    [uploader]="uploader" 
    class="well upload-drop-zone"> 
    Drop Files Here 
</div>