event.preventDefault and stopPropagationis not wor

Question

I'm implementing file drag/drop in angular2 as follows.

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)
    })
  }
}

in My service appState is as follows:

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();
    };

My html is as follows:

<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>

But when I drag and drop a image file to dropzone It opens the file in the browser.

Answer 1

I just added an event listener to body and I'm preventing events their as follows:

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();
      });

All other thing is same as before, It worked.

Answer 2

below implementation without jquery, using angular2 with 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>

Typescript

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);
    }
}