Merge pull request #57 from rsuite/fix-Uploader

Support `maxPreviewFileSize` on `<Uploader>`
rsuite · May 31, 2018 · 9f4c82a · 9f4c82a
2 parents 8fec8f6 + 07cfe87
commit 9f4c82a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/src/UploadFileItem.js b/src/UploadFileItem.js
@@ -24,6 +24,7 @@ type Props = {
   onPreview?: (file: FileType, event: SyntheticEvent<*>) => void,
   onReupload?: (file: FileType, event: SyntheticEvent<*>) => void,
   className?: string,
+  maxPreviewFileSize: number,
   classPrefix?: string
 };
 
@@ -53,6 +54,7 @@ const getSize = (size: number = 0): string => {
 
 class UploadFileItem extends React.Component<Props, State> {
   static defaultProps = {
+    maxPreviewFileSize: 1024 * 1024 * 5, // 5MB
     listType: 'text'
   };
 
@@ -64,22 +66,23 @@ class UploadFileItem extends React.Component<Props, State> {
   }
 
   componentWillMount() {
-    this.getThumbnail();
+    this.getThumbnail((previewImage: string | ArrayBuffer) => {
+      this.setState({ previewImage });
+    });
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (_.isEqual(nextProps, this.props)) {
-      this.getThumbnail(nextProps);
+  getThumbnail(callback) {
+    const { file, listType, maxPreviewFileSize } = this.props;
+
+    if (!!~['picture-text', 'picture'].indexOf(listType)) {
+      return;
     }
-  }
 
-  getThumbnail(nextProps?: Props) {
-    const { file } = nextProps || this.props;
-    if (file.blobFile) {
-      previewFile(file.blobFile, (previewImage: string | ArrayBuffer) => {
-        this.setState({ previewImage });
-      });
+    if (!file.blobFile || _.get(file, 'blobFile.size') > maxPreviewFileSize) {
+      return;
     }
+
+    previewFile(file.blobFile, callback);
   }
 
   handleRemove = (event: SyntheticEvent<*>) => {

diff --git a/src/Uploader.js b/src/Uploader.js
@@ -64,7 +64,8 @@ type Props = {
   onPreview?: (file: FileType, event: SyntheticEvent<*>) => void,
   onSuccess?: (response: Object, file: FileType) => void,
   onProgress?: (percent: number, file: FileType) => void,
-  onRemove?: (file: FileType) => void
+  onRemove?: (file: FileType) => void,
+  maxPreviewFileSize?: number
 };
 
 type State = {
@@ -267,7 +268,7 @@ class Uploader extends React.Component<Props, State> {
   };
 
   renderFileItems() {
-    const { disabled, listType, onPreview } = this.props;
+    const { disabled, listType, onPreview, maxPreviewFileSize } = this.props;
     const fileList = this.getFileList();
 
     return (
@@ -276,6 +277,7 @@ class Uploader extends React.Component<Props, State> {
           <FileItem
             key={file.fileKey || index}
             file={file}
+            maxPreviewFileSize={maxPreviewFileSize}
             listType={listType}
             disabled={disabled}
             onPreview={onPreview}