A drag and drop container has been created using Angular 2 typescript. The goal is to alter the background color of the drag & drop container while dragging a file into it.
Typescript:
@HostListener('dragover', ['$event']) public onDragOver(evt){
evt.preventDefault();
evt.stopPropagation();
}
@HostListener('dragleave', ['$event']) public onDragLeave(evt){
evt.preventDefault();
evt.stopPropagation();
}
@HostListener('drop', ['$event']) public onDrop(evt){
evt.preventDefault();
evt.stopPropagation();
let files = evt.dataTransfer.files;
let valid_files : Array<File> = [];
let invalid_files : Array<File> = [];
if(files.length > 0){
forEach(files, (file: File) =>{
let ext = file.name.split('.')[file.name.split('.').length - 1];
if(this.allowed_extensions.lastIndexOf(ext) != -1){
valid_files.push(file);
}else{
invalid_files.push(file);
}
});
this.filesChangeEmiter.emit(valid_files);
this.filesInvalidEmiter.emit(invalid_files);
}
}
HTML:
<div class="dropzone" (filesChangeEmiter)="onFilesChange($event)"
(filesInvalidEmiter)="onFileInvalids($event)">
<div class="centered">Drop your file here!</div>
</div>
Attempt was made using HostBinding to modify the background color, but it was unsuccessful. Is there a way to detect the dragging state and adjust its CSS?