自定义material-ui-dropzone的DropZoneArea

huangapple
go评论91阅读模式
英文:

Customize DropZoneArea for material-ui-dropzone

问题

以下是您要翻译的部分：

I would like to customize the look of the DropZoneArea besides the simple dropZoneText and Icon props. I have successfully done it, but I get the following react warning Failed prop type: Invalid prop 'dropzoneText' of type 'object' supplied to 'DropzoneAreaBase', expected string.

I understand what the issue is, but I was wondering if anyone knew how to accurately customize it.

Default looks like:
自定义material-ui-dropzone的DropZoneArea

I want the following:

自定义material-ui-dropzone的DropZoneArea

I was able to get it to work by overriding the the dropZoneText prop as follows:

  1.   filesLimit={1}
  2.   showAlerts={false}
  3.   classes={{ root: clsx([classes.dropZoneRoot, uploading ? classes.disableClick : null]) }}
  4.   showPreviewsInDropzone={false}
  5.   showFileNames={false}
  6.   dropzoneClass={classes.dropZone}
  7.   Icon={''}
  8.   dropzoneText={
  9.     <Box className={classes.customDropZone} px={16} py={6} display="flex" flexDirection="column" justifyContent="center" alignItems="center" gridGap={4}>
  10.       {uploading && (
  11.         <Box className={classes.customDropZoneLoader} display="flex" flexDirection="column" justifyContent="center" alignItems="center">
  12.           <CircularProgress size="2rem" />
  13.         </Box>
  14.       )}
  15.       <Typography variant="subtitle1">Drop your file here</Typography>
  16.       <Typography>or</Typography>
  17.       <Box mt={1}>
  18.         <Button color="primary" variant="outlined" style={{ width: 125 }}>
  19.           Select File
  20.         </Button>
  21.       </Box>
  22.       <Box mt={1}>
  23.         <Typography>
  24.           Accepted file types: <br />
  25.           <strong>.png, .jpg, .gif, .txt, .csv, .doc, .docx, .xls, .xlsx, .pdf</strong>
  26.         </Typography>
  27.       </Box>
  28.       <Box mt={1}>
  29.         <Typography>
  30.           Maximum file size: <strong>20MB</strong>
  31.         </Typography>
  32.       </Box>
  33.     </Box>
  34.   }
  35.   maxFileSize={20971520}
  36.   acceptedFiles={[
  37.     'application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png, application/txt, text/tab-separated-values, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values'
  38.   ]}
  39.   onChange={onFileDropped}
  40.   onDropRejected={onFileRejected}
  41. >                    
  42. </DropzoneArea>

Does anyone know of a better way to do this and not get the warning? For what it's worth, it works perfectly fine, but just throws the warning in the console.

英文:

I would like to customize the look of the DropZoneArea besides the simple dropZoneText and Icon props. I have successfully done it, but I get the following react warning Failed prop type: Invalid prop &#39;dropzoneText&#39; of type &#39;object&#39; supplied to &#39;DropzoneAreaBase&#39;, expected string.

I understand what the issue is, but I was wondering if anyone knew how to accurately customize it.

Default looks like:
自定义material-ui-dropzone的DropZoneArea

I want the following:

自定义material-ui-dropzone的DropZoneArea

I was able to get it to work by overriding the the dropZoneText prop as follows:

  1. &lt;DropzoneArea
  2.   filesLimit={1}
  3.   showAlerts={false}
  4.   classes={{ root: clsx([classes.dropZoneRoot, uploading ? classes.disableClick : null]) }}
  5.   showPreviewsInDropzone={false}
  6.   showFileNames={false}
  7.   dropzoneClass={classes.dropZone}
  8.   Icon={&#39;&#39;}
  9.   dropzoneText={
  10.     &lt;Box className={classes.customDropZone} px={16} py={6} display=&quot;flex&quot; flexDirection=&quot;column&quot; justifyContent=&quot;center&quot; alignItems=&quot;center&quot; gridGap={4}&gt;
  11.       {uploading &amp;&amp; (
  12.         &lt;Box className={classes.customDropZoneLoader} display=&quot;flex&quot; flexDirection=&quot;column&quot; justifyContent=&quot;center&quot; alignItems=&quot;center&quot;&gt;
  13.           &lt;CircularProgress size=&quot;2rem&quot; /&gt;
  14.         &lt;/Box&gt;
  15.       )}
  16.       &lt;Typography variant=&quot;subtitle1&quot;&gt;Drop your file here&lt;/Typography&gt;
  17.       &lt;Typography&gt;or&lt;/Typography&gt;
  18.       &lt;Box mt={1}&gt;
  19.         &lt;Button color=&quot;primary&quot; variant=&quot;outlined&quot; style={{ width: 125 }}&gt;
  20.           Select File
  21.         &lt;/Button&gt;
  22.       &lt;/Box&gt;
  23.       &lt;Box mt={1}&gt;
  24.         &lt;Typography&gt;
  25.           Accepted file types: &lt;br /&gt;
  26.           &lt;strong&gt;.png, .jpg, .gif, .txt, .csv, .doc, .docx, .xls, .xlsx, .pdf&lt;/strong&gt;
  27.         &lt;/Typography&gt;
  28.       &lt;/Box&gt;
  29.       &lt;Box mt={1}&gt;
  30.         &lt;Typography&gt;
  31.           Maximum file size: &lt;strong&gt;20MB&lt;/strong&gt;
  32.         &lt;/Typography&gt;
  33.       &lt;/Box&gt;
  34.     &lt;/Box&gt;
  35.   }
  36.   maxFileSize={20971520}
  37.   acceptedFiles={[
  38.     &#39;application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png, application/txt, text/tab-separated-values, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values&#39;
  39.   ]}
  40.   onChange={onFileDropped}
  41.   onDropRejected={onFileRejected}
  42. &gt;                    
  43. &lt;/DropzoneArea&gt;

Does anyone know of a better way to do this and not get the warning? For what it's worth, it works perfectly fine, but just throws the warning in the console.

答案1

得分: 1

很遗憾，看起来该存储库的维护者无法修复它。https://github.com/Yuvaleros/material-ui-dropzone/issues/35 - 这是一个相当旧的存储库，所以我怀疑它会被修复。

如果你在使用Typescript，你可以将<Box>包装器强制转换为字符串，让DropzoneArea组件正常工作，但问题在于库本身没有使用对象/ReactNode作为预期类型。

如果你真的想尝试修复它，你可以使用npm包像patch-package在你的项目中本地修复它。https://www.npmjs.com/package/patch-package

英文:

Unfortunately, it seems the maintainer of that repository is not capable of fixing it. https://github.com/Yuvaleros/material-ui-dropzone/issues/35 - It's a rather old repository so I doubt it would get fixed.

If you were using Typescript, you could cast the <Box> wrapper as a string to make the DropzoneArea component happy, but the issue is with the library itself not using object / ReactNode as an expected type.

If you really want to try and fix that, you could use an npm package like patch-package to fix it locally for your project. https://www.npmjs.com/package/patch-package

答案2

得分: 0

  1. 我已经自定义如下。希望这对某人有所帮助。
  2. （将此添加到您添加了DropzoneArea的组件中）
  4.      useEffect(() => {
  5.         const container = document.getElementsByClassName(
  6.           'dropZone',
  7.         ) as HTMLCollectionOf<HTMLElement>;
  8.         if (container[0]?.children[0]) {
  9.           container[0].children[0].innerHTML =
  10.             "<div class='new_drop_zone_wrapper'>\n" +
  11.             "<div class='new_drop_zone_title'>选择文件或拖放至此</div>\n" +
  12.             "<div class='new_drop_zone_description'>支持 .xls 或 .xlsx 格式</div>\n" +
  13.             "<div class='new_drop_zone_button_wrapper'>" +
  14.             "<div class='new_drop_zone_button'>添加文件</div>" +
  15.             '</div>' +
  16.             '</div>';
  17.         }
  18.       }, []);
英文:

I have customised like the following. Hope this will help someone.
(Add this to the component where you have added DropzoneArea)

  1.  useEffect(() =&gt; {
  2.     const container = document.getElementsByClassName(
  3.       &#39;dropZone&#39;,
  4.     ) as HTMLCollectionOf&lt;HTMLElement&gt;;
  5.     if (container[0]?.children[0]) {
  6.       container[0].children[0].innerHTML =
  7.         &quot;&lt;div class=&#39;new_drop_zone_wrapper&#39;&gt;\n&quot; +
  8.         &quot;&lt;div class=&#39;new_drop_zone_title&#39;&gt;Choose file or grag it here&lt;/div&gt;\n&quot; +
  9.         &quot;&lt;div class=&#39;new_drop_zone_description&#39;&gt;Supports .xls or .xlsx formats&lt;/div&gt;\n&quot; +
  10.         &quot;&lt;div class=&#39;new_drop_zone_button_wrapper&#39;&gt;&quot; +
  11.         &quot;&lt;div class=&#39;new_drop_zone_button&#39;&gt;Add File&lt;/div&gt;&quot; +
  12.         &#39;&lt;/div&gt;&#39; +
  13.         &#39;&lt;/div&gt;&#39;;
  14.     }
  15.   }, []);

huangapple
  • 本文由 发表于 2023年2月7日 03:42:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/75365847.html
  • dropzone
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定