fix typing for `Upload.beforeUpload` (#10059)

* fix typing for `Upload.beforeUpload`
fix #9775

* add RcFile interface, fix tests

* fix typing of `Upload.onStart`

components/upload/Upload.tsx

@@ -7,6 +7,7 @@ import defaultLocale from '../locale-provider/default';
 import Dragger from './Dragger';
 import UploadList from './UploadList';
 import {
+  RcFile,
   UploadProps,
   UploadState,
   UploadFile,
@@ -55,7 +56,7 @@ export default class Upload extends React.Component<UploadProps, UploadState> {
     this.clearProgressTimer();
   }
 
-  onStart = (file: UploadFile) => {
+  onStart = (file: RcFile) => {
     let targetItem;
     let nextFileList = this.state.fileList.concat();
     targetItem = fileToObject(file);
@@ -187,15 +188,15 @@ export default class Upload extends React.Component<UploadProps, UploadState> {
     });
   }
 
-  beforeUpload = (file: UploadFile, fileList: UploadFile[]) => {
+  beforeUpload = (file: RcFile, fileList: RcFile[]) => {
     if (!this.props.beforeUpload) {
       return true;
     }
     const result = this.props.beforeUpload(file, fileList);
     if (result === false) {
       this.onChange({
-        file,
+        file: fileToObject(file),
-        fileList: uniqBy(fileList.concat(this.state.fileList), (item: any) => item.uid),
+        fileList: uniqBy(fileList.map(fileToObject).concat(this.state.fileList),  (item: UploadFile) => item.uid),
       });
       return false;
     } else if (result && (result as PromiseLike<any>).then) {

components/upload/__tests__/upload.test.js

@@ -48,7 +48,7 @@ describe('Upload', () => {
     wrapper.find('input').simulate('change', {
       target: {
         files: [
-          { filename: 'foo.png' },
+          { file: 'foo.png' },
         ],
       },
     });
@@ -75,7 +75,7 @@ describe('Upload', () => {
     wrapper.find('input').simulate('change', {
       target: {
         files: [
-          { filename: 'foo.png' },
+          { file: 'foo.png' },
         ],
       },
     });
@@ -102,7 +102,7 @@ describe('Upload', () => {
     wrapper.find('input').simulate('change', {
       target: {
         files: [
-          { filename: 'foo.png' },
+          { file: 'foo.png' },
         ],
       },
     });

components/upload/__tests__/uploadlist.test.js

@@ -86,7 +86,7 @@ describe('Upload List', () => {
     wrapper.find('input').simulate('change', {
       target: {
         files: [
-          { filename: 'foo.png' },
+          { name: 'foo.png' },
         ],
       },
     });
@@ -112,7 +112,7 @@ describe('Upload List', () => {
     wrapper.find('input').simulate('change', {
       target: {
         files: [
-          { filename: 'foo.png' },
+          { name: 'foo.png' },
         ],
       },
     });
@@ -134,7 +134,7 @@ describe('Upload List', () => {
     wrapper.find('input').simulate('change', {
       target: {
         files: [
-          { filename: 'foo.png' },
+          { name: 'foo.png' },
         ],
       },
     });
@@ -196,7 +196,7 @@ describe('Upload List', () => {
     wrapper.find('input').simulate('change', {
       target: {
         files: [
-          { filename: 'foo.png' },
+          { name: 'foo.png' },
         ],
       },
     });

components/upload/interface.tsx

@@ -6,12 +6,16 @@ export interface HttpRequestHeader {
   [key: string]: string;
 }
 
+export interface RcFile extends File {
+  uid: number;
+}
+
 export interface UploadFile {
   uid: number;
   size: number;
   name: string;
   filename?: string;
-  lastModified?: string;
+  lastModified?: number;
   lastModifiedDate?: Date;
   url?: string;
   status?: UploadFileStatus;
@@ -57,7 +61,7 @@ export interface UploadProps {
   showUploadList?: boolean | ShowUploadListInterface;
   multiple?: boolean;
   accept?: string;
-  beforeUpload?: (file: UploadFile, FileList: UploadFile[]) => boolean | PromiseLike<any>;
+  beforeUpload?: (file: RcFile, FileList: RcFile[]) => boolean | PromiseLike<any>;
   onChange?: (info: UploadChangeParam) => void;
   listType?: UploadListType;
   className?: string;

components/upload/utils.tsx

@@ -1,4 +1,4 @@
-import { UploadFile } from './interface';
+import { RcFile, UploadFile } from './interface';
 
 export function T() {
   return true;
@@ -6,18 +6,16 @@ export function T() {
 
 // Fix IE file.status problem
 // via coping a new Object
-export function fileToObject(file: UploadFile) {
+export function fileToObject(file: RcFile): UploadFile {
   return {
     lastModified: file.lastModified,
     lastModifiedDate: file.lastModifiedDate,
-    name: file.filename || file.name,
+    name: file.name,
     size: file.size,
     type: file.type,
-    uid: file.uid,
-    response: file.response,
-    error: file.error,
     percent: 0,
-    originFileObj: file as (File | UploadFile),
+    uid: file.uid,
+    originFileObj: file,
   } as UploadFile;
 }