标签: react-dropzone

希望你能帮助我，我正在使用react-dropzone中的useDropzone钩子，我不知道如何为每个文件创建一个删除文件按钮。

如何删除单个文件？

这是我的代码：

function DragFile(props) {
  const { acceptedFiles, rejectedFiles, getRootProps, getInputProps } = useDropzone({
    accept: 'image/jpeg, image/png, .pdf',
    maxSize: 3000000,
    multiple: true
  });

  const acceptedFilesItems = acceptedFiles.map(file => (
    <Col xs={12} md={4} key={file.path} className="card-file">
      <div className="file-extension">{file.path.substring(file.path.indexOf('.') + 1)}</div>
      <span>{file.path.substring(0, file.path.indexOf('.'))} <small>{(file.size / 1000).toFixed(2)} Kb</small></span>
      <button className="delete">DeleteButton</button>
    </Col>
  ));

  const rejectedFilesItems = rejectedFiles.map(file => (
    <li key={file.path}>
      {file.path.substring(0, file.path.indexOf('.'))} - {file.size / 1000} Kb
    </li>
  ));

  return (
    <div>
      <div {...getRootProps({ className: 'dropzone drag-n-drop' })}>
        <input id="file-claim" {...getInputProps()} /> …

我正在测试React Dropzone,我需要检查onDrop函数.此函数有两个参数(acceptedFiles和rejectedFiles).我在嘲笑这样的文件:

let image = {
  name: 'cat.jpg',
  size: 1000,
  type: 'image/jpeg'
};

然后在我的测试中,我这样做:

it('should call handleOnDrop with more than 5 acceptedFiles', () => {
    const wrapper = mount(mockComponent());

    for (let index = 0; index < 5; index++) {
      images.push(image);
    }

    wrapper.find(Dropzone).simulate('drop', { dataTransfer: { files: images } });

    expect(setUserNotificationsSpy).toHaveBeenCalledTimes(1);
});

这是我的onDrop函数:

const handleOnDrop = (acceptedFiles, rejectedFiles) => {
    if (rejectedFiles && rejectedFiles.length) {
      checkMaxFile(rejectedFiles, maxSize) && setUserNotifications('error_big_image');
    }

    acceptedFiles && acceptedFiles.length <= maxFiles ? onDrop(acceptedFiles) : setUserNotifications('more_than_5'); …

如何将react-dropzone与react-hook-form一起使用，以便表单返回正确的文件-而不仅仅是文件名？

我需要有关如何制作react-dropzone NPM 包的帮助，以便让上传的文件在图像文件（*.png、*.jpg/jpeg、*.gif 等）以外的文件上显示预览——这些都只生成预览美好的）。

Currently, when I use Dropzone for uploading accompanying files on a web form, if I Upload an Image file (*.png, *.jpg, etc.), the Preview we have set up shows just fine with a small thumbnail of the Uploaded file. (see pic below)

However, if I upload another type of file, say an MS-Outlook *.docx, *.xlsx, or say an Adobe Acrobat *.pdf, it just gives me a blank box with a broken file image and whatever …

我正在尝试使用本机Fetch和FormData API一次将多个文件上载到服务器，但是我终生无法正常工作。这是我得到的：

// acceptedFiles are File objects coming from `react-dropzone`.
function handleSubmit(acceptedFiles) {
  const data = new FormData();

  for (const file of acceptedFiles) {
    data.append('files', file, file.name);
  }

  return fetch('https://example.com/api/upload', {
    method: 'POST',
    body: data,      
  });
}

但是我的Rails服务器收到的是：

Parameters: {"files"=>#
<ActionDispatch::Http::UploadedFile:0x00007feb347becc0 @tempfile=#
<Tempfile:/var/folders/kl/y1jrp7zs55sbx075jjjl3p280000gn/T/RackMultipart201
71112-6486-1ftkufy.mp4>, @original_filename="SampleVideo_1280x720_5mb.mp4",
 @content_type="video/mp4", @headers="Content-Disposition: form-data; 
name=\"files\"; filename=\"SampleVideo_1280x720_5mb.mp4\"\r\nContent-Type:
 video/mp4\r\n">}

换句话说，看起来files实际上只是一个文件。但是文档FormData说追加应该追加多个文件。

那么怎么了？

我已经阅读了很多关于此的答案，并且大多数建议使用该acceptedFiles属性来指定接受的 mime 类型。

但是，DropZone 文档说：

Mime 类型确定跨平台不可靠。例如，CSV 文件在 macOS 下报告为 text/plain，但在 Windows 下报告为 application/vnd.ms-excel。在某些情况下，可能根本没有设置 MIME 类型。

我正在尝试上传 .csv 文件，并且（使用material-ui-dropzone），到目前为止我已经尝试过：

  <Dropzone
    acceptedFiles={['.csv', 'text/*']}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

  <Dropzone
    acceptedFiles={'.csv', 'text/*'}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

  <Dropzone
    acceptedFiles={'.csv', 'text/csv'}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

...等，但到目前为止还没有工作：

• 打开文件对话框将文件显示.csv为灰色
• 将.csv文件拖放到 DropZone 会得到“文件 SeriesNotes.csv 被拒绝。不支持文件类型”。信息

为material-ui-dropzone（或任何版本的 DropZone）解决这个问题的正确方法是什么？

我目前正在使用 Material Ui dropzone 上传多个文件。只是想知道在 redux 存储中添加/更新文件的最佳方法是什么。我目前正在执行“onChange”触发时的调度操作，该操作返回 dropzone 上的所有文件并通过存储具有 files 对象的整个 files 数组来更新 redux 状态。

请让我知道是否有最好的方法来处理这个问题。

我目前正在使用 RDU(react-dropzone-uploader) 将文件上传到服务器，我将上传的文件保存在反应状态。我试图弄清楚如何在反应状态下将已上传的文件显示为拖放区预览的一部分。

我尝试过查看文档中的道具列表。

https://react-dropzone-uploader.js.org/docs/props

我找到了initialFilesprop，但它会自动上传提供的输入文件数组。

任何帮助表示赞赏

我在我的应用程序上使用react-dropzone，并希望在一页上有多个dropzone来预览多个图像。例如，我希望能够将英雄图像拖放到在页面顶部显示英雄图像的放置区。然后，我想将不同的图像放到不同的放置区上，该放置区在缩略图容器中显示图像。

import React, { useState, useMemo, useEffect } from "react";
import Container from "../components/Container";
import { useDropzone } from "react-dropzone";

const Test = () => {
  // Dropzone
  const baseStyle = {
    flex: 1,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    borderWidth: 2,
    borderRadius: 2,
    borderColor: "#eeeeee",
    borderStyle: "dashed",
    backgroundColor: "#fafafa",
    color: "#bdbdbd",
    outline: "none",
    transition: "border .24s ease-in-out",
  };

  const activeStyle = {
    borderColor: "#2196f3",
  };

  const acceptStyle = {
    borderColor: "#00e676",
  };

  const rejectStyle = {
    borderColor: …

我\xc2\xb4m 目前正在构建一个反应放置区，原因很明显，但我收到了这些奇怪的错误：

Skipped "accepted" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for a list of valid MIME types.\n

您可以定义拖放区将接受的数据类型。\n它如下所示：

useDropzone({\n    accept: { accepted: ['image/png', 'image/jpeg'] },\n    maxFiles: 1,\n    multiple: false,\n    onDrop: (acceptedFiles) => {\n      setFiles(\n        acceptedFiles.map((file) =>\n          Object.assign(file, {\n            preview: URL.createObjectURL(file)\n          })\n        )\n      );\n    }\n  });\n

在那里你还可以看到接受键，我从中收到错误消息。\n由于 TypeScript，它具有奇怪的语法：

export interface Accept {\n  [key: string]: string[];\n}\n

\xc2\xb4 是接受键的预期类型。

关于为什么我\xc2\xb4m 收到这个奇怪的错误消息有什么想法吗？\n（我也在该行中停用了 TS 并收到了相同的消息。

由于某种原因，代码仍然有效...所以其他文件，即 \xc2\xb4t 图像被接受...\n很高兴获得任何帮助 - 干杯！