maxFiles 在 react-admin 中不起作用 - dropZone答案

【问题标题】：maxFiles not work in react-admin - dropZonemaxFiles 在 react-admin 中不起作用 - dropZone
【发布时间】：2021-02-03 15:32:47
【问题描述】：

我尝试过给用react-dropzone构建的react-admin的ImageInput设置文件限制，有两种方式，第一种是直接将** maxFiles **作为属性传递：

<ImageInput
    className={classes.dropZone}
    source="images"
    label=""
    accept="image/*"
    multiple
    maxSize={1000000}
    maxFiles={2}
    placeholder={
        <p>Cargar imagen/es<br/><br/><br/>
            <span >
              *El archivo no debe exceder 1MB de tamaño
            </span>
        </p>
      }>
    <ImageField source="src" title="title"/>
</ImageInput>

第二个是通过**选项**也不起作用。

<ImageInput
    className={classes.dropZone}
    source="images"
    label=""
    accept="image/*"
    multiple
    maxSize={1000000}
    options={{ maxFiles:2 }}
    placeholder={
        <p>Cargar imagen/es<br/><br/><br/>
            <span >
              *El archivo no debe exceder 1MB de tamaño
            </span>
        </p>
      }>
    <ImageField source="src" title="title"/>
</ImageInput>

有人知道我该如何解决吗？或其他方式来限制可以上传的文件数量？

非常感谢

【问题讨论】：

你使用的是什么版本的 react-dropzone？

标签： javascript reactjs react-admin dropzone react-dropzone

【解决方案1】：

我猜你使用的是旧版本的react-dropzone。

最简单的解决方法是更新版本。（最新版本是11.3.0）

如果你想对版本做同样的事情，你可以尝试像这样使用onDrop props 手动管理它。

onDrop={acceptedFiles => {
    // do nothing if no files
    let handleDropImages;
    if (acceptedFiles.length === 0) {
         return;
    } else if(acceptedFiles.length > 5){ // here i am checking on the number of files
         return notify('maxImages'); // here i am using react toaster to get some notifications. don't need to use it 
    }else {
         // do what ever you want 
    }
}}

你可以参考这个issue

【讨论】：

我尝试了两种方法，在我的代码中添加了相同版本的 onDrop 并更新了库，它仍然对我不起作用，我一定是做错了什么。我澄清说我在一个名为 FormWithRedirect 的自定义 react-admin 表单中使用它。

【解决方案2】：

您可以使用 validate 属性来解决问题。

const maxFiles = () => (
    value => value && value.length > 10 ? "Max number of files exceeded" : undefined;

<ImageInput
    className={classes.dropZone}
    source="images"
    label=""
    accept="image/*"
    multiple
    maxSize={1000000}
    validate={maxFiles()}
    placeholder={
        <p>Cargar imagen/es<br/><br/><br/>
            <span >
              *El archivo no debe exceder 1MB de tamaño
            </span>
        </p>
      }>
    <ImageField source="src" title="title"/>
</ImageInput>

【讨论】：