Akhilesh Kumar Akhilesh Kumar - 1 month ago 27
Javascript Question

event.preventDefault and stopPropagationis not working as expected in drag/drop event

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

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