From 2513845101fcc3c4a747bd7f6d6ad11b3538afc8 Mon Sep 17 00:00:00 2001 From: "alice.zhang" Date: Wed, 5 Jan 2022 20:01:09 +0800 Subject: [PATCH 1/4] fix: nz-upload drag drop will open new tab when use firefox versions 91 and 92 --- components/upload/upload.component.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/components/upload/upload.component.ts b/components/upload/upload.component.ts index eeaf42064d..397d519c0f 100644 --- a/components/upload/upload.component.ts +++ b/components/upload/upload.component.ts @@ -11,6 +11,7 @@ import { EventEmitter, Input, OnChanges, + AfterViewInit, OnDestroy, OnInit, Optional, @@ -52,7 +53,7 @@ import { NzUploadListComponent } from './upload-list.component'; '[class.ant-upload-picture-card-wrapper]': 'nzListType === "picture-card"' } }) -export class NzUploadComponent implements OnInit, OnChanges, OnDestroy { +export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { static ngAcceptInputType_nzLimit: NumberInput; static ngAcceptInputType_nzSize: NumberInput; static ngAcceptInputType_nzDirectory: BooleanInput; @@ -328,6 +329,12 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy { this.cdr.detectChanges(); } + // fix firefox drop open new tab + private handleDropOpenNewTab(e: DragEvent){ + e.preventDefault(); + e.stopPropagation() + } + // #endregion ngOnInit(): void { @@ -344,6 +351,10 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy { }); } + ngAfterViewInit(): void { + document.body.addEventListener('drop', this.handleDropOpenNewTab); + } + ngOnChanges(): void { this.zipOptions().setClassMap(); } @@ -351,5 +362,6 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy { ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); + document.body.removeEventListener('drop', this.handleDropOpenNewTab) } } From c211a5083b17a64b2d83717e234dc4473fa0e56b Mon Sep 17 00:00:00 2001 From: "alice.zhang" Date: Fri, 7 Jan 2022 19:53:44 +0800 Subject: [PATCH 2/4] fix:nz-upload drag drop will open new tab when use firefox versions in 91 and 92 --- components/upload/upload.component.ts | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/components/upload/upload.component.ts b/components/upload/upload.component.ts index 397d519c0f..ac737e3cbb 100644 --- a/components/upload/upload.component.ts +++ b/components/upload/upload.component.ts @@ -18,9 +18,12 @@ import { Output, TemplateRef, ViewChild, + NgZone, + Inject, ViewEncapsulation } from '@angular/core'; -import { Observable, of, Subject, Subscription } from 'rxjs'; +import { DOCUMENT } from '@angular/common'; +import { Observable, of, Subject, Subscription, fromEvent } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; import { BooleanInput, NumberInput, NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -176,6 +179,8 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe // #endregion constructor( + private ngZone: NgZone, + @Inject(DOCUMENT) private document: Document, private cdr: ChangeDetectorRef, private i18n: NzI18nService, @Optional() private directionality: Directionality @@ -329,12 +334,6 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe this.cdr.detectChanges(); } - // fix firefox drop open new tab - private handleDropOpenNewTab(e: DragEvent){ - e.preventDefault(); - e.stopPropagation() - } - // #endregion ngOnInit(): void { @@ -352,7 +351,11 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe } ngAfterViewInit(): void { - document.body.addEventListener('drop', this.handleDropOpenNewTab); + // fix firefox drop open new tab + this.ngZone.runOutsideAngular(() => fromEvent(this.document.body, 'drop').pipe(takeUntil(this.destroy$)).subscribe((event) => { + event.preventDefault(); + event.stopPropagation(); + })); } ngOnChanges(): void { @@ -362,6 +365,5 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); - document.body.removeEventListener('drop', this.handleDropOpenNewTab) } } From 024804e3681d3fcc9f918bccddee2d5e4f5a1a86 Mon Sep 17 00:00:00 2001 From: "alice.zhang" Date: Thu, 13 Jan 2022 21:08:54 +0800 Subject: [PATCH 3/4] fix: nz-upload drag drop will open new tab when use firefox versions in 91 and 92 --- components/upload/upload.component.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/components/upload/upload.component.ts b/components/upload/upload.component.ts index ac737e3cbb..7ffedd4955 100644 --- a/components/upload/upload.component.ts +++ b/components/upload/upload.component.ts @@ -4,6 +4,7 @@ */ import { Direction, Directionality } from '@angular/cdk/bidi'; +import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -22,7 +23,6 @@ import { Inject, ViewEncapsulation } from '@angular/core'; -import { DOCUMENT } from '@angular/common'; import { Observable, of, Subject, Subscription, fromEvent } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; @@ -179,7 +179,7 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe // #endregion constructor( - private ngZone: NgZone, + private ngZone: NgZone, @Inject(DOCUMENT) private document: Document, private cdr: ChangeDetectorRef, private i18n: NzI18nService, @@ -352,10 +352,14 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe ngAfterViewInit(): void { // fix firefox drop open new tab - this.ngZone.runOutsideAngular(() => fromEvent(this.document.body, 'drop').pipe(takeUntil(this.destroy$)).subscribe((event) => { - event.preventDefault(); - event.stopPropagation(); - })); + this.ngZone.runOutsideAngular(() => + fromEvent(this.document.body, 'drop') + .pipe(takeUntil(this.destroy$)) + .subscribe(event => { + event.preventDefault(); + event.stopPropagation(); + }) + ); } ngOnChanges(): void { From de308f3a8c49f2edffb7f3d264983ff5e4435d28 Mon Sep 17 00:00:00 2001 From: "alice.zhang" Date: Fri, 4 Mar 2022 21:15:49 +0800 Subject: [PATCH 4/4] fix: nz-upload modify document type is NzSafeAny --- components/upload/upload.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/upload/upload.component.ts b/components/upload/upload.component.ts index 7ffedd4955..e6d833ea7f 100644 --- a/components/upload/upload.component.ts +++ b/components/upload/upload.component.ts @@ -180,7 +180,7 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe constructor( private ngZone: NgZone, - @Inject(DOCUMENT) private document: Document, + @Inject(DOCUMENT) private document: NzSafeAny, private cdr: ChangeDetectorRef, private i18n: NzI18nService, @Optional() private directionality: Directionality @@ -353,7 +353,7 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe ngAfterViewInit(): void { // fix firefox drop open new tab this.ngZone.runOutsideAngular(() => - fromEvent(this.document.body, 'drop') + fromEvent(this.document.body, 'drop') .pipe(takeUntil(this.destroy$)) .subscribe(event => { event.preventDefault();