ng2FileDrop directive emitting onDragLeave event if host has child DIVs #502

New Issue

2016-11-21T23:18:57Z

mbellezi commented

2016-11-21 23:18:57 +00:00

(Migrated from github.com)

If the DIV hosting the ng2FileDrop directive has child DIV, when one drag and hover over this DIVs, the onDragLeave event is fired. It should be fired only when the drag goes outside the host element.
I've managed to solve this issue modifying the onDragLeave event for the directive:

@HostListener('dragleave', [ '$event' ])
  public onDragLeave(event: any): any {
    if (event.currentTarget !== (this as any).element[ 0 ]) {
      return;
    }

    this._preventAndStop(event);
    this.fileOver.emit(false);
  }

Note that the === was replaced by !== as one should emit only when leaving the host element.

If the DIV hosting the ng2FileDrop directive has child DIV, when one drag and hover over this DIVs, the onDragLeave event is fired. It should be fired only when the drag goes outside the host element. I've managed to solve this issue modifying the onDragLeave event for the directive: ``` @HostListener('dragleave', [ '$event' ]) public onDragLeave(event: any): any { if (event.currentTarget !== (this as any).element[ 0 ]) { return; } this._preventAndStop(event); this.fileOver.emit(false); } ``` Note that the === was replaced by !== as one should emit only when leaving the host element.

mbellezi commented

2016-11-21 23:32:35 +00:00

(Migrated from github.com)

Hum, not working also. Now it does not emit when leaving the host element. dragleave event on the host is firing when dragging over the clild DIV and I can not differentiate from the real dragleave when leaving the host DIV.
Any thoughts?

Hum, not working also. Now it does not emit when leaving the host element. dragleave event on the host is firing when dragging over the clild DIV and I can not differentiate from the real dragleave when leaving the host DIV. Any thoughts?

mbellezi commented

2016-11-21 23:57:45 +00:00

(Migrated from github.com)

Some people suggested disable the pointer events in the child DIVs and this really works:

.dropzone div {
pointer-events: none;
}

This is not supported before IE 11.

Some people suggested disable the pointer events in the child DIVs and this really works: ``` .dropzone div { pointer-events: none; } ``` This is not supported before IE 11.

mbellezi commented

2016-11-22 16:40:10 +00:00

(Migrated from github.com)

There is a fix that could be done without using pointer-events.
You need to create a counter incrementing it on a dragenter event and decrement it on dragleave. You should fileOver.emit(false) only when the counter goes back to zero.

There is a fix that could be done without using pointer-events. You need to create a counter incrementing it on a dragenter event and decrement it on dragleave. You should fileOver.emit(false) only when the counter goes back to zero.

sbervinov commented

2019-03-28 18:30:41 +00:00

(Migrated from github.com)

I have found a workaround:

HTML code:

<form [class.file-over]="isFileOver"
      ng2FileDrop
      [uploader]="fileUploader"
      (fileOver)="fileOver($event)">

TypeScript code:

isFileOver = false;  // this variable stores a valid isFileOver value

fileOverSubject: Subject<boolean> = new Subject<boolean>();
fileOverSubscription: ISubscription;

fileOver(isFileOver: boolean): void {
    if (isFileOver && !this.fileOverSubscription) {
        this.isFileOver = true;
        this.fileOverSubscription = this.fileOverSubject
            .buffer(this.fileOverSubject.bufferTime(100))
            .do((fileOvers: boolean[]) => {
                if (!fileOvers.length) {
                    this.fileOverSubscription.unsubscribe();
                    this.fileOverSubscription = undefined;
                    this.isFileOver = false;
                }
            })
            .subscribe();
    }
    if (this.fileOverSubscription) {
        this.fileOverSubject.next(isFileOver);
    }
}

ngOnDestroy(): void {
    if (this.fileOverSubscription) {
        this.fileOverSubscription.unsubscribe();
    }
}

I have found a workaround: HTML code: <form [class.file-over]="isFileOver" ng2FileDrop [uploader]="fileUploader" (fileOver)="fileOver($event)"> TypeScript code: isFileOver = false; // this variable stores a valid isFileOver value fileOverSubject: Subject<boolean> = new Subject<boolean>(); fileOverSubscription: ISubscription; fileOver(isFileOver: boolean): void { if (isFileOver && !this.fileOverSubscription) { this.isFileOver = true; this.fileOverSubscription = this.fileOverSubject .buffer(this.fileOverSubject.bufferTime(100)) .do((fileOvers: boolean[]) => { if (!fileOvers.length) { this.fileOverSubscription.unsubscribe(); this.fileOverSubscription = undefined; this.isFileOver = false; } }) .subscribe(); } if (this.fileOverSubscription) { this.fileOverSubject.next(isFileOver); } } ngOnDestroy(): void { if (this.fileOverSubscription) { this.fileOverSubscription.unsubscribe(); } }

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#502