event.preventDefaultとstopPropagationがドラッグ・アンド・ドロップ・イベントで期待通りに機能しない

Question

次のように、angular2でファイルのドラッグ・アンド・ドロップを実装しています。マイサービスappStateで

export class JobDescription implements AfterViewInit { 

    ..... 

    noPropagation:any=(e)=>{ 
    e.stopPropagation(); 
    if (e.preventDefault) { 
     return e.preventDefault(); 
    } else { 
     return e.returnValue = false; 
    } 
    }; 
    constructor(public router: Router,public route:ActivatedRoute, public http: Http,public appState: AppState,private $uibModal: NgbModal,private renderer:Renderer) { 
    this.main=appState._state; 
    ..... 
    } 
    ngAfterViewInit() { 
    this.dragViewInit(); 
    } 

    ........ 

    FileDragHover(e){ 
    e = e || event; 
    this.noPropagation(e); 
    jQuery(".upload-cta").addClass("upload_cta_active"); 
    }; 
    FileSelectHandler(e){ 
    e = e || event; 
    this.noPropagation(e); 
    this.FileDragHover(e); 
    this.droppedFiles = e.target.files || e.dataTransfer.files; 
    }; 


    dragViewInit(){ 
    this.appState.set("dragViewInit",function() { 
     console.log("Init called"); 
     setTimeout(()=>{ 
     var fileselect = document.getElementById("fileselect"), 
      filedrag = document.getElementById("dropzone"); 
     fileselect.addEventListener("change", this.FileSelectHandler, false); 
     var xhr = new XMLHttpRequest(); 
     if (xhr.upload) { 
      filedrag.addEventListener("dragover", this.FileDragHover, false); 
      filedrag.addEventListener("dragleave", this.FileDragHover, false); 
      filedrag.addEventListener("drop", this.FileSelectHandler, false); 
     } 
     console.log("Init is initilised"); 
     },500) 
    }) 
    } 
} 

次のとおりです。

<template ngbModalContainer></template> 
<template #uploadCV let-c="close" let-d="dismiss"> 
    <div class="modal-getintouch"> 
    <div class="modal-header"> 
     <h4 class="modal-title text-uppercase">Upload your CV</h4> 
     <button type="button" class="close" (click)="c('close')"> 
     <i class="bi_interface-cross"></i> 
     </button> 
    </div> 
    <div class="modal-body"> 
     <section id="dropzone" class="upload-cta pad-t-1 dropzone"> 
     <div class=""> 
      <div class="upload-cv-icon col-lg-offset-4"></div> 
      <p class="center-text pad-b-3"> 
      Drag and drop your resume here<br /> 
      <span class="browse-files">You can also <a href="javascript:void(0)" (click)="clickInp(myFilInp)">browse and choose files</a></span> 
      </p> 
      <p>{{fileDesp}}</p> 
      <input class="box__file" type="file" #myFilInp name="files[]" id="fileselect" style="display: none" (change)="showFiles()" /> 

     </div> 
     </section> 
     <div class="row"> 
     <div class="col-12"> 
      <div *ngIf="filProgress" class="progress"> 
      <div class="progress-bar progress-bar-striped active" role="progressbar" 
       [attr.aria-valuenow]="filProgress" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: filProgress+'%'}"> 
       40% 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
     <button type="button" [ngClass]="{'btn':true, 'btn-success':true,'btn-default':true, 'pull-right':true}" (click)="upload()"> 
      <i class="fa fa-upload"></i> Upload 
     </button> 
     </div> 
    </div> 
    </div> 
</template> 

しかし、私はドラッグ＆dropzoneに画像ファイルをドロップするときには、ファイルを開き、次のよう

this._state['open'] = function(tmplt, modalSize) { 
     console.log("tmplt",tmplt); 
     this['modalInstance'] = ngbModal.open(tmplt, {size: modalSize}); 
    }; 

this._state['uploadCV'] = function(content){ 
     this.open(content, 'lg'); 
     this.dragViewInit(); 
    }; 

私のhtmlがありますブラウザに表示されます。

typescriptですと

HTML

<div (dragover)="allowDrop($event)" (drop)="onFileDrop($event)" 
[class.drag-over]='allowFileDrop'> 
    <div class="file-upload-button"> 
     <label> 
      Upload Resume 
      <input class="hide-file" type="file" (change)="onFileChange($event)" placeholder="Upload file..." accept=".pdf,.doc,.docx"/> 
     </label> 
    </div> 
</div> 

をangular2使用してjQueryのなしの実装以下

Answer 1

、活字体

allowDrop(event): void { 
    event.preventDefault(); 
    event.dataTransfer.setData("Drop Here", event.target.id); 
    this.allowFileDrop = true; // highlight drop zone on drag over using css class 
} 

onFileDrop(event) { 
    event.preventDefault(); 
    this.allowFileDrop = false; 
    let fileList: FileList = event.dataTransfer.files; 
    this.uploadResume(fileList); 
} 

onFileChange(event) { 
    let fileList: FileList = event.target.files; 
    this.uploadResume(fileList); 
} 

private uploadResume(fileList: FileList){ 
    if(fileList.length > 0){ 
     let file: File = fileList[0]; 
     console.log(file.name); 
    } 
} 

Answer 2

私は体にイベントリスナーを追加し、次の自分のように私は、イベントを防止しています：

jQuery("body").on('drag dragstart dragend dragleave dragenter dragover drop',function(e){ 
     e=e||event; 
     e.preventDefault(); 
     e.stopPropagation(); 
     e.originalEvent.preventDefault(); 
     e.originalEvent.stopPropagation(); 
     }); 

他のすべては以前と同じですを処理しました。