fix(module:upload): fix upload drag drop will open new tab in firefox 91 and 92 #7190

small-lady · 2022-01-05T12:33:26Z

…91 and 92

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

解决nz-upload在火狐浏览器91及92版本上拖拽上传时会默认打开一个新窗口

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x ] No

Other information

…91 and 92

zorro-bot · 2022-01-05T12:33:44Z

This preview will be available after the AzureCI is passed.

codecov · 2022-01-05T12:51:25Z

Codecov Report

Merging #7190 (8f70d4c) into master (77db914) will decrease coverage by 0.09%.
The diff coverage is 93.48%.

❗ Current head 8f70d4c differs from pull request most recent head de308f3. Consider uploading reports for the commit de308f3 to get more accurate results

@@            Coverage Diff             @@
##           master    #7190      +/-   ##
==========================================
- Coverage   91.67%   91.57%   -0.10%     
==========================================
  Files         486      487       +1     
  Lines       15868    16014     +146     
  Branches     2587     2604      +17     
==========================================
+ Hits        14547    14665     +118     
- Misses       1007     1036      +29     
+ Partials      314      313       -1

Impacted Files	Coverage Δ
components/carousel/typings.ts	`100.00% <ø> (ø)`
components/input/input-group.component.ts	`98.27% <ø> (ø)`
components/message/message-container.component.ts	`95.00% <ø> (-0.46%)`	⬇️
components/message/message.service.ts	`100.00% <ø> (ø)`
components/notification/notification.service.ts	`100.00% <ø> (ø)`
components/code-editor/code-editor.component.ts	`16.00% <14.28%> (+0.29%)`	⬆️
components/button/button.component.ts	`98.57% <50.00%> (ø)`
...ponents/date-picker/lib/decade-header.component.ts	`78.57% <50.00%> (ø)`
components/icon/icon.service.ts	`92.64% <50.00%> (-2.81%)`	⬇️
components/table/src/table/tr-measure.component.ts	`86.95% <50.00%> (+0.59%)`	⬆️
... and 67 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 77db914...de308f3. Read the comment docs.

arturovt · 2022-01-06T15:21:08Z

components/upload/upload.component.ts

+  ngAfterViewInit(): void {
+    document.body.addEventListener('drop', this.handleDropOpenNewTab);
+  }


Suggested change

ngAfterViewInit(): void {

document.body.addEventListener('drop', this.handleDropOpenNewTab);

}

constructor(private ngZone: NgZone, @Inject(DOCUMENT) private document: Document) {}

ngAfterViewInit(): void {

this.ngZone.runOutsideAngular(() => fromEvent(this.document.body, 'drop').pipe(takeUntil(this.destroy$)).subscribe(event => {

event.preventDefault();

event.stopPropagation();

}));

}

arturovt · 2022-01-06T15:21:15Z

components/upload/upload.component.ts

  ngOnChanges(): void {
    this.zipOptions().setClassMap();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
+    document.body.removeEventListener('drop', this.handleDropOpenNewTab)


Suggested change

document.body.removeEventListener('drop', this.handleDropOpenNewTab)

arturovt · 2022-01-06T15:21:25Z

components/upload/upload.component.ts

+  // fix firefox drop open new tab
+  private handleDropOpenNewTab(e: DragEvent){
+    e.preventDefault();
+    e.stopPropagation()
+  }
+


Suggested change

// fix firefox drop open new tab

private handleDropOpenNewTab(e: DragEvent){

e.preventDefault();

e.stopPropagation()

}

…n 91 and 92

cipchk · 2022-01-15T08:27:25Z

@small-lady Record a screen? I don't see this prompt here. My firefox env: Mac 95.0.2 (64-bit).

small-lady · 2022-01-21T05:56:17Z

@small-lady Record a screen? I don't see this prompt here. My firefox env: Mac 95.0.2 (64-bit).

This problem is not in 95.0.2 @cipchk ； it is in 91 and 92(Firefox Extended Support Release)

…in 91 and 92

simplejason · 2022-03-03T03:47:29Z

@small-lady Record a screen? I don't see this prompt here. My firefox env: Mac 95.0.2 (64-bit).

This problem is not in 95.0.2 @cipchk ； it is in 91 and 92(Firefox Extended Support Release)

@cipchk Any question about this PR?

cipchk · 2022-03-04T11:51:33Z

components/upload/upload.component.ts

@@ -175,6 +179,8 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
  // #endregion

  constructor(
+    private ngZone: NgZone,
+    @Inject(DOCUMENT) private document: Document,


Suggested change

@Inject(DOCUMENT) private document: Document,

@Inject(DOCUMENT) private document: NzSafeAny,

建议使用 NzSafeAny 来代替，不然可能在 SSR 下会有问题。

@cipchk 已按建议修改，谢谢~

cipchk · 2022-03-05T06:00:45Z

LGTM

fix: nz-upload drag drop will open new tab when use firefox versions …

2513845

…91 and 92

small-lady requested a review from cipchk as a code owner January 5, 2022 12:33

pr-triage bot added the PR: unreviewed label Jan 5, 2022

arturovt requested changes Jan 6, 2022

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Jan 6, 2022

fix:nz-upload drag drop will open new tab when use firefox versions i…

c211a50

…n 91 and 92

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Jan 7, 2022

small-lady changed the title ~~fix: nz-upload drag drop will open new tab when use firefox versions …~~ fix(module:upload): fix nz-upload drag drop will open new tab when use firefox versions … Jan 14, 2022

small-lady changed the title ~~fix(module:upload): fix nz-upload drag drop will open new tab when use firefox versions …~~ fix(module:upload): fix upload drag drop will open new tab when use firefox 91 and 92 Jan 21, 2022

fix: nz-upload drag drop will open new tab when use firefox versions …

024804e

…in 91 and 92

small-lady force-pushed the master branch from 3535a1f to 024804e Compare January 21, 2022 13:02

cipchk requested changes Mar 4, 2022

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Mar 4, 2022

fix: nz-upload modify document type is NzSafeAny

de308f3

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Mar 4, 2022

cipchk added PR: reviewed-approved and removed PR: unreviewed labels Mar 5, 2022

simplejason changed the title ~~fix(module:upload): fix upload drag drop will open new tab when use firefox 91 and 92~~ fix(module:upload): fix upload drag drop will open new tab in firefox 91 and 92 Mar 21, 2022

pr-triage bot added PR: unreviewed and removed PR: reviewed-approved labels Mar 21, 2022

simplejason merged commit 9b51874 into NG-ZORRO:master Mar 21, 2022

pr-triage bot added PR: merged and removed PR: unreviewed labels Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(module:upload): fix upload drag drop will open new tab in firefox 91 and 92 #7190

fix(module:upload): fix upload drag drop will open new tab in firefox 91 and 92 #7190

small-lady commented Jan 5, 2022

zorro-bot bot commented Jan 5, 2022

codecov bot commented Jan 5, 2022 •

edited

arturovt Jan 6, 2022

arturovt Jan 6, 2022

arturovt Jan 6, 2022

cipchk commented Jan 15, 2022

small-lady commented Jan 21, 2022 •

edited

simplejason commented Mar 3, 2022

cipchk Mar 4, 2022

small-lady Mar 4, 2022

cipchk commented Mar 5, 2022

-  ngAfterViewInit(): void {
-    document.body.addEventListener('drop', this.handleDropOpenNewTab);
-  }
+  constructor(private ngZone: NgZone, @Inject(DOCUMENT) private document: Document) {}
+  ngAfterViewInit(): void {
+    this.ngZone.runOutsideAngular(() => fromEvent(this.document.body, 'drop').pipe(takeUntil(this.destroy$)).subscribe(event => {
+      event.preventDefault();
+      event.stopPropagation();
+    }));
+  }

	@Inject(DOCUMENT) private document: Document,
	@Inject(DOCUMENT) private document: NzSafeAny,

fix(module:upload): fix upload drag drop will open new tab in firefox 91 and 92 #7190

fix(module:upload): fix upload drag drop will open new tab in firefox 91 and 92 #7190

Conversation

small-lady commented Jan 5, 2022

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

zorro-bot bot commented Jan 5, 2022

codecov bot commented Jan 5, 2022 • edited

Codecov Report

arturovt Jan 6, 2022

Choose a reason for hiding this comment

arturovt Jan 6, 2022

Choose a reason for hiding this comment

arturovt Jan 6, 2022

Choose a reason for hiding this comment

cipchk commented Jan 15, 2022

small-lady commented Jan 21, 2022 • edited

simplejason commented Mar 3, 2022

cipchk Mar 4, 2022

Choose a reason for hiding this comment

small-lady Mar 4, 2022

Choose a reason for hiding this comment

cipchk commented Mar 5, 2022

codecov bot commented Jan 5, 2022 •

edited

small-lady commented Jan 21, 2022 •

edited