优化多文件上传和文件名超长问题

scss/components/form/_file.scss

@@ -78,6 +78,15 @@
         }
     }
 
+    &-itemInfoText {
+        white-space: nowrap;
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        line-height: 1;
+    }
+
     &-clear {
         float: right;
         color: #999;
@@ -100,6 +109,8 @@
         transform: translateY(-3px);
         width: 100%;
         align-items: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 
         >span {
             display: inline-block;
@@ -116,6 +127,8 @@
         }
     }
 
+
+
     &-progress {
         height: 5px;
         flex: 1;

src/renderers/Form/File.tsx

@@ -705,7 +705,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                     fd.append(config.fieldName || 'file', blob, file.name);
 
                     return self
-                        ._send(reciever, fd, {}, progress => updateProgress(task.partNumber, progress))
+                        ._send(api, fd, {}, progress => updateProgress(task.partNumber, progress))
                         .then(ret => {
                             state.loaded++;
                             callback(null, {
@@ -854,7 +854,9 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                                                         })}
                                                     >
                                                         <Icon icon="file" className="icon" />
-                                                        {file.name || (file as FileValue).filename}
+                                                        <span className={cx('FileControl-itemInfoText')}>
+                                                            {file.name || (file as FileValue).filename}
+                                                        </span>
                                                         {file.state === 'invalid' || file.state === 'error' ? (
                                                             <Icon icon="fail" className="icon" />
                                                         ) : null}
@@ -876,7 +878,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                                                                         width: `${
                                                                             file.state === 'uploaded'
                                                                                 ? 100
-                                                                                : file.progress * 100
+                                                                                : (file.progress || 0) * 100
                                                                         }%`
                                                                     }}
                                                                 />

src/renderers/Form/Image.tsx

@@ -11,6 +11,7 @@ import {buildApi} from '../../utils/api';
 import {createObject, qsstringify} from '../../utils/helper';
 import {Icon} from '../../components/icons';
 import Button from '../../components/Button';
+// @ts-ignore
 import accepts from 'attr-accept';
 
 let id = 1;
@@ -137,7 +138,7 @@ export default class ImageControl extends React.Component<ImageProps, ImageState
     };
 
     cropper = React.createRef<Cropper>();
-    dropzone = React.createRef<DropZone>();
+    dropzone = React.createRef<any>();
     current: FileValue | FileX | null = null;
     resolve?: (value?: any) => void;