feat(module:upload): send event when file is not authorize

Author: Nicoss54

components/upload/doc/index.en-US.md

@@ -53,6 +53,7 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 | `[nzPreviewIsImage]`        | 自定义预览文件是否有效图像，一般用于图像 URL 为非标准格式；注意：务必使用 `=>` 定义处理方法。                                   | `(file: NzUploadFile) => boolean`                                                                | -            |
 | `[nzRemove]`                | 点击移除文件时的回调，返回值为 false 时不移除。支持返回 `Observable` 对象；注意：务必使用 `=>` 定义处理方法。                   | `(file: NzUploadFile) => boolean \| Observable<boolean>`                                         | -            |
 | `(nzChange)`                | 上传文件改变时的状态                                                                                                            | `EventEmitter<NzUploadChangeParam>`                                                              | -            |
+| `(nzFilesNotAuthorize)`     | 当文件不符合标准过滤器时，将执行回调函数                                                                                                                                 | `EventEmitter<NzFileNotAuthorize[]>`                                                             | -               |
 | `[nzDownload]`              | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页                                                           | `(file: NzUploadFile) => void`                                                                   | 跳转新标签页 |
 | `[nzTransformFile]`         | 在上传之前转换文件。支持返回一个 Observable 对象                                                                                | `(file: NzUploadFile) => NzUploadTransformFileType`                                              | -            |
 | `[nzIconRender]`            | 自定义显示 icon                                                                                                                 | `TemplateRef<{ $implicit: NzUploadFile }>`                                                       | -            |

components/upload/doc/index.zh-CN.md

@@ -58,24 +58,33 @@ export interface ZipButtonOptions {
   action?: string | ((file: NzUploadFile) => string | Observable<string>);
   directory?: boolean;
   openFileDialogOnClick?: boolean;
+
   beforeUpload?(file: NzUploadFile, fileList: NzUploadFile[]): boolean | Observable<NzSafeAny>;
+
   customRequest?(item: NzSafeAny): Subscription;
+
   data?: {} | ((file: NzUploadFile) => {} | Observable<{}>);
   headers?: {} | ((file: NzUploadFile) => {} | Observable<{}>);
   name?: string;
   multiple?: boolean;
   withCredentials?: boolean;
   filters?: UploadFilter[];
+
   transformFile?(file: NzUploadFile): NzUploadTransformFileType;
+
   onStart?(file: NzUploadFile): void;
+
   onProgress?(e: NzSafeAny, file: NzUploadFile): void;
+
   onSuccess?(ret: NzSafeAny, file: NzUploadFile, xhr: NzSafeAny): void;
+
   onError?(err: NzSafeAny, file: NzUploadFile): void;
 }
 
 export interface UploadFilter {
   name: string;
-  fn(fileList: NzUploadFile[]): NzUploadFile[] | Observable<NzUploadFile[]>;
+
+  fn(fileList: NzUploadFile[], filesNotAuthorize?: NzFileNotAuthorize[]): NzUploadFile[] | Observable<NzUploadFile[]>;
 }
 
 export interface NzUploadXHRArgs {
@@ -86,9 +95,17 @@ export interface NzUploadXHRArgs {
   postFile: string | Blob | File | NzUploadFile;
   data?: IndexableObject;
   withCredentials?: boolean;
+
   onProgress?(e: NzSafeAny, file: NzUploadFile): void;
+
   onSuccess?(ret: NzSafeAny, file: NzUploadFile, xhr: NzSafeAny): void;
+
   onError?(err: NzSafeAny, file: NzUploadFile): void;
 }
 
+export interface NzFileNotAuthorize {
+  reason: 'size' | 'extension';
+  file: NzUploadFile | File;
+}
+
 export type NzIconRenderTemplate = TemplateRef<{ $implicit: NzUploadFile }>;

components/upload/interface.ts

@@ -5,15 +5,26 @@
 
 import { ENTER } from '@angular/cdk/keycodes';
 import { HttpClient, HttpEvent, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core';
-import { Observable, Subject, Subscription, of } from 'rxjs';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { Observable, of, Subject, Subscription } from 'rxjs';
 import { map, switchMap, takeUntil, tap } from 'rxjs/operators';
 
 import { warn } from 'ng-zorro-antd/core/logger';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
 
-import { NzUploadFile, NzUploadXHRArgs, ZipButtonOptions } from './interface';
+import { NzFileNotAuthorize, NzUploadFile, NzUploadXHRArgs, ZipButtonOptions } from './interface';
 
 @Component({
   selector: '[nz-upload-btn]',
@@ -34,8 +45,10 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy {
   reqs: Record<string, Subscription> = {};
   private destroy = false;
   private destroy$ = new Subject<void>();
+  private _nzFileNotAuthorize: NzFileNotAuthorize[] = [];
   @ViewChild('file', { static: true }) file!: ElementRef<HTMLInputElement>;
   @Input() options!: ZipButtonOptions;
+  @Output() readonly nzFilesNotAuthorize = new EventEmitter<NzFileNotAuthorize[]>();
 
   onClick(): void {
     if (this.options.disabled || !this.options.openFileDialogOnClick) {
@@ -46,39 +59,55 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy {
 
   // skip safari bug
   onFileDrop(e: DragEvent): void {
+    this._nzFileNotAuthorize = [];
     if (this.options.disabled || e.type === 'dragover') {
       e.preventDefault();
       return;
     }
     if (this.options.directory) {
       this.traverseFileTree(e.dataTransfer!.items);
     } else {
-      const files: File[] = Array.prototype.slice
-        .call(e.dataTransfer!.files)
-        .filter((file: File) => this.attrAccept(file, this.options.accept));
+      const files: File[] = Array.prototype.slice.call(e.dataTransfer!.files).filter((file: File) => {
+        if (this.attrAccept(file, this.options.accept)) {
+          return true;
+        } else {
+          this._nzFileNotAuthorize.push({ reason: 'extension', file });
+          return false;
+        }
+      });
       if (files.length) {
         this.uploadFiles(files);
       }
+      if (this._nzFileNotAuthorize.length > 0) {
+        this.nzFilesNotAuthorize.emit(this._nzFileNotAuthorize);
+      }
     }
 
     e.preventDefault();
   }
 
   onChange(e: Event): void {
+    this._nzFileNotAuthorize = [];
     if (this.options.disabled) {
       return;
     }
     const hie = e.target as HTMLInputElement;
     this.uploadFiles(hie.files!);
+    if (this._nzFileNotAuthorize.length > 0) {
+      this.nzFilesNotAuthorize.emit(this._nzFileNotAuthorize);
+    }
     hie.value = '';
   }
 
   private traverseFileTree(files: DataTransferItemList): void {
+    const filesToUpload: File[] = [];
     const _traverseFileTree = (item: NzSafeAny, path: string): void => {
       if (item.isFile) {
         item.file((file: File) => {
           if (this.attrAccept(file, this.options.accept)) {
-            this.uploadFiles([file]);
+            filesToUpload.push(file);
+          } else {
+            this._nzFileNotAuthorize.push({ reason: 'extension', file });
           }
         });
       } else if (item.isDirectory) {
@@ -95,6 +124,9 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy {
     for (const file of files as NzSafeAny) {
       _traverseFileTree(file.webkitGetAsEntry(), '');
     }
+    if (filesToUpload.length > 0) {
+      this.uploadFiles(filesToUpload);
+    }
   }
 
   private attrAccept(file: File, acceptedFiles?: string | string[]): boolean {
@@ -135,7 +167,7 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy {
       this.options.filters.forEach(f => {
         filters$ = filters$.pipe(
           switchMap(list => {
-            const fnRes = f.fn(list);
+            const fnRes = f.fn(list, this._nzFileNotAuthorize);
             return fnRes instanceof Observable ? fnRes : of(fnRes);
           })
         );

components/upload/upload-btn.component.ts

@@ -23,14 +23,14 @@
 <ng-template #con><ng-content></ng-content></ng-template>
 <ng-template #btn>
   <div [class]="classList" [style.display]="nzShowButton ? '' : 'none'">
-    <div nz-upload-btn #uploadComp [options]="_btnOptions!">
+    <div nz-upload-btn #uploadComp [options]="_btnOptions!" (nzFilesNotAuthorize)="emitFilesNotAuthorize($event)">
       <ng-template [ngTemplateOutlet]="con"></ng-template>
     </div>
   </div>
 </ng-template>
 @if (nzType === 'drag') {
   <div [class]="classList" (drop)="fileDrop($event)" (dragover)="fileDrop($event)" (dragleave)="fileDrop($event)">
-    <div nz-upload-btn #uploadComp [options]="_btnOptions!" class="ant-upload-btn">
+    <div nz-upload-btn #uploadComp [options]="_btnOptions!" class="ant-upload-btn" (nzFilesNotAuthorize)="emitFilesNotAuthorize($event)">
       <div class="ant-upload-drag-container">
         <ng-template [ngTemplateOutlet]="con"></ng-template>
       </div>

components/upload/upload.component.html

@@ -8,30 +8,31 @@ import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
+  numberAttribute,
   OnChanges,
   OnDestroy,
   OnInit,
   Output,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation,
-  booleanAttribute,
-  inject,
-  numberAttribute
+  ViewEncapsulation
 } from '@angular/core';
-import { Observable, Subject, Subscription, of } from 'rxjs';
+import { Observable, of, Subject, Subscription } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { fromEventOutsideAngular, toBoolean } from 'ng-zorro-antd/core/util';
 import { NzI18nService, NzUploadI18nInterface } from 'ng-zorro-antd/i18n';
 
 import {
+  NzFileNotAuthorize,
   NzIconRenderTemplate,
   NzShowUploadList,
   NzUploadChangeParam,
@@ -116,6 +117,7 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe
 
   @Output() readonly nzChange: EventEmitter<NzUploadChangeParam> = new EventEmitter<NzUploadChangeParam>();
   @Output() readonly nzFileListChange: EventEmitter<NzUploadFile[]> = new EventEmitter<NzUploadFile[]>();
+  @Output() readonly nzFilesNotAuthorize: EventEmitter<NzFileNotAuthorize[]> = new EventEmitter<NzFileNotAuthorize[]>();
 
   _btnOptions?: ZipButtonOptions;
 
@@ -138,14 +140,30 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     if (this.nzSize > 0 && filters.findIndex(w => w.name === 'size') === -1) {
       filters.push({
         name: 'size',
-        fn: (fileList: NzUploadFile[]) => fileList.filter(w => w.size! / 1024 <= this.nzSize)
+        fn: (fileList: NzUploadFile[], filesNotAuthorize: NzFileNotAuthorize[]) =>
+          fileList.filter(w => {
+            if (w.size! / 1024 <= this.nzSize) {
+              return true;
+            } else {
+              filesNotAuthorize.push({ file: w, reason: 'size' });
+              return false;
+            }
+          })
       });
     }
     if (this.nzFileType && this.nzFileType.length > 0 && filters.findIndex(w => w.name === 'type') === -1) {
       const types = this.nzFileType.split(',');
       filters.push({
         name: 'type',
-        fn: (fileList: NzUploadFile[]) => fileList.filter(w => ~types.indexOf(w.type!))
+        fn: (fileList: NzUploadFile[], nzFileNotAuthorize: NzFileNotAuthorize[]) =>
+          fileList.filter(w => {
+            if (~types.indexOf(w.type!)) {
+              return true;
+            } else {
+              nzFileNotAuthorize.push({ file: w, reason: 'extension' });
+              return false;
+            }
+          })
       });
     }
     this._btnOptions = {
@@ -329,6 +347,10 @@ export class NzUploadComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     this.cdr.detectChanges();
   }
 
+  emitFilesNotAuthorize($event: NzFileNotAuthorize[]): void {
+    this.nzFilesNotAuthorize.emit($event);
+  }
+
   // #endregion
 
   ngOnInit(): void {

components/upload/upload.component.ts

@@ -7,7 +7,7 @@ import { ENTER, TAB } from '@angular/cdk/keycodes';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { ApplicationRef, Component, DebugElement, Injector, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { Observable, Observer, of, throwError } from 'rxjs';
@@ -23,6 +23,7 @@ import { provideNzIconsTesting } from 'ng-zorro-antd/icon/testing';
 import { NzUploadModule } from 'ng-zorro-antd/upload/upload.module';
 
 import {
+  NzFileNotAuthorize,
   NzIconRenderTemplate,
   NzShowUploadList,
   NzUploadChangeParam,
@@ -68,6 +69,7 @@ const PNGBIG = { target: { files: { 0: LARGEFILE, length: 1, item: () => LARGEFI
 
 class Item {
   children?: Item[];
+
   constructor(public name: string) {}
 }
 
@@ -152,6 +154,15 @@ describe('upload', () => {
         expect(instance._beforeUploadList.length).toBe(0);
       });
 
+      it('should send an event if extension is not correct', () => {
+        const spy = spyOn(instance, 'nzFileNotAuthorizeChange');
+        instance.nzFileType = 'image/png';
+        fixture.detectChanges();
+        pageObject.postFile(JPGSMALL.target.files);
+        expect(spy).toHaveBeenCalled();
+        expect(spy).toHaveBeenCalledWith([{ reason: 'extension', file: JPGSMALL.target.files[0] }]);
+      });
+
       it('should limit 1kb size', () => {
         instance.nzSize = 1;
         fixture.detectChanges();
@@ -160,6 +171,14 @@ describe('upload', () => {
         expect(instance._beforeUploadList.length).toBe(0);
       });
 
+      it('should send an event if size is not correct', () => {
+        const spy = spyOn(instance, 'nzFileNotAuthorizeChange');
+        instance.nzSize = 1;
+        fixture.detectChanges();
+        pageObject.postLarge();
+        expect(spy).toHaveBeenCalled();
+      });
+
       it('should be abort when user canceled', () => {
         pageObject.postLarge();
         const req = httpMock.expectOne(instance.nzAction as string);
@@ -932,6 +951,7 @@ describe('upload', () => {
         addEventListener(_name: string, callback: VoidFunction): void {
           callback();
         }
+
         removeEventListener(): void {}
 
         set src(_: string) {}
@@ -1376,6 +1396,7 @@ describe('upload', () => {
         [nzFileListRender]="nzFileListRender"
         (nzFileListChange)="nzFileListChange($event)"
         (nzChange)="nzChange($event)"
+        (nzFilesNotAuthorize)="nzFileNotAuthorizeChange($event)"
       >
         <button nz-button>
           <nz-icon nzType="upload" />
@@ -1435,6 +1456,7 @@ class TestUploadComponent {
     return true;
   };
   _nzChange!: NzUploadChangeParam;
+  _nzFileNotAuthorizeChange: NzFileNotAuthorize[] = [];
 
   nzChange(value: NzUploadChangeParam): void {
     this._nzChange = value;
@@ -1444,6 +1466,10 @@ class TestUploadComponent {
     this._nzChange = value;
   }
 
+  nzFileNotAuthorizeChange(value: NzFileNotAuthorize[]): void {
+    this._nzFileNotAuthorizeChange = value;
+  }
+
   directory = false;
 }