让 react-dropzone 接受 *all* 文件答案

【问题标题】：Getting react-dropzone to accept *all* files让 react-dropzone 接受 *all* 文件
【发布时间】：2019-05-06 23:55:26
【问题描述】：

我在 AWS EC2 实例服务器上继承了前端的 React.JS 和后端的 Node.JS/Express.JS 代码库。我使用的代码是 react-dropzone (https://react-dropzone.js.org/)，它只用于拖放图像文件。我正在处理的项目的产品所有者现在希望它接受所有文件（*.pdf、*.docx、*.xlsx 等）。

我想知道如何让它接受所有文件？我已经浏览了 react-dropzone 文档，但我还没有找到任何示例来展示如何让它接受 all 文件类型？是否像将accept="..." 从accept="image/*" 设置为accept="*/*" 一样简单？ accept="..." 的字符串可以是一个数组，例如：accept=["image/*","text/*",...] 等吗？让 react-dropzone 接受任何文件类型的正确方法是什么？

这是我的onDrop 回调的代码——

    onDrop = (acceptedFiles, rejectedFiles) => {
      let files = acceptedFiles.map(async file => {
        let data = new FormData();
        data.append("file", file);

        let item = await axios
          .post("triage/upload", data, {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(response => {
            return Object.assign(file, {
              preview: URL.createObjectURL(file),
              filename: response.data.filename
            });
          })
          .catch(err => {
            let rejects = rejectedFiles.map(async file => {
              let data = new FormData();
              await data.append("file", file);

              console.log("There was an error while attempting to add your files:", err);
              console.log("The files that were rejected were:\n", rejects.join('\n'))
            })
          });
        return item;
      });
      Promise.all(files)
      .then(completed => {
        console.log("completed", completed);
        let fileNames = completed.map(function(item) {
          return item["filename"];
        });
        this.setState({ files: completed, fileNames: fileNames });
      })
      .catch(err => {
        console.log('DROPZONE ERROR:', err);
      });
    };

...这是<DropZone> 本身在同一个文件中的代码——

              <Dropzone accept="image/*" onDrop={this.onDrop}>
                {({ getRootProps, getInputProps, isDragActive }) => {
                  return (
                    <div
                      {...getRootProps()}
                      className={classNames("dropzone", {
                        "dropzone--isActive": isDragActive
                      })}
                    >
                      <input {...getInputProps()} />
                      {isDragActive ? (
                        <div>
                          <div className="centered">
                            <Icon name="cloud upload" size="big" />
                          </div>
                          <div className="centered">Drop Files Here.</div>
                          <div className="centered">
                            <Button className="drop-button">
                              Or Click to Select
                            </Button>
                          </div>
                        </div>
                      ) : (
                        <div>
                          <div className="centered">
                            <Icon name="cloud upload" size="big" />
                          </div>
                          <div className="centered">
                            Drag and Drop Supporting Files here to
                            Upload.
                          </div>
                          <div className="centered">
                            <Button className="drop-button">
                              Or Click to Select
                            </Button>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                }}
              </Dropzone>

【问题讨论】：

到目前为止你有没有尝试过？如果您只是省略该属性会发生什么？
@ChrisG - 它返回一个空数组 (completed ˃ [])，因为没有上传任何内容。

标签： javascript reactjs react-dropzone

【解决方案1】：

您可以将like 与常规input 一起使用，因此您可以执行多种文件类型，例如：image/*,.pdf。

参考here。

【讨论】：

对不起，@codecubed.io，但我不太明白你所说的“就像普通的 input 一样使用”是什么意思，而不是 accept="image/*，我可以有input="image/*, *.pdf, *.doc*..." 等？
它不适用于所有平台，正如他们在documentation 中所说的那样。您可以使用"video/*, image/png"，但".pdf, image/*" 不会让PDF 文档被接受。而对于 pdf，您需要 "application/pdf"
参考solution

【解决方案2】：

只需从<Dropzone /> 中删除accept 属性，它将允许任何文件类型。

【讨论】：

【解决方案3】：

我遇到了同样的问题。

react-dropzone 使用attr-accept 来处理接受文件。让我们看看后者的源代码。

* @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
 * @param acceptedFiles {string}
 * @returns {boolean}

...

export default function(file, acceptedFiles) {
  if (file && acceptedFiles) {
    ...
  }
  return true
}

要获得true的返回值，只需输入一个虚假的字符串值，即''

【讨论】：

【解决方案4】：

如果你使用useDropZone，那就是这样的

const {inputProps,...rest }=useDropZone({
onDrop,//onDrop function
acceptFiles:'image/png' //<--- here you provide input related info
})

【讨论】：

它不适用于所有平台，正如他们在documentation 中所说的那样。您可以使用"video/*, image/png"，但".pdf, image/*" 不会让PDF 文档被接受。