标签: react-dropzone

我使用以下命令允许用户使用react-dropzone上传个人资料照片：

const FILE_FIELD_NAME = 'files';

const renderDropzoneInput = (field) => {
  const files = field.input.value;
  let dropzoneRef;
  return (
    <div>
      <Dropzone
        name={field.name}
        onDrop={( filesToUpload, e ) => field.input.onChange(filesToUpload)}
        ref={(node) => { dropzoneRef = node; }}
        accept="image/jpeg, image/png"
        maxSize={5242880}
      >
        {({ isDragActive, isDragReject, acceptedFiles, rejectedFiles }) => {
          if (isDragActive) {
            return "This file is authorized";
          }
          if (isDragReject) {
            return "This file is not authorized";
          }
          return acceptedFiles.length || rejectedFiles.length
            ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
            : "Try …

我试图了解将大文件从前端上传到服务器的最佳方法是什么。对于前端，我使用一个名为的库react-dropzone，它允许我获取我打算上传的文件的信息。我的上传组件看起来像这样：

// Node Modules
import React, {useCallback} from 'react';
import {useDropzone} from 'react-dropzone';
import {useTranslation} from 'react-i18next';

export default function Upload() {
  // i18n
  const [t] = useTranslation();

  // React Dropzone
  const onDrop = useCallback((droppedFiles) => {
    console.log(droppedFiles);
  }, []);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});

  return (
    <div className="upload" {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>{t('DROP_FILES_HERE')}</p>
      ) : (
        <p>{t('DRAG_AND_DROP_FILES_HERE_OR_CLICK_TO_SELECT_FILES')}</p>
      )}
    </div>
  );
}

这使我能够访问文件的内容，例如文件的名称、类型和大小（以字节为单位）。 这个库似乎也适用于更大的文件（100+ MB），但我的问题是当我想上传这个数据时如何调用这些数据？

我的一个想法是使用localStorage，但最大大小似乎约为5 到 10 MB。我也在Redux …

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

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

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

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

任何帮助表示赞赏

我正在使用react-dropzone允许用户上传个人资料照片.

我这样定义自定义CSS:

const dropzoneStyle = {
  width: `200px`,
  height: `200px`,
  backgroundColor: `#1DA1F2`,
};

在渲染DropZone输入的方法中,我可以检测它们是否是在用户选择要上载的图像后填充的文件预览.

我想要做的是,如果file.preview存在,则将file.preview发送到dropzoneStyle,以便将背景图像添加到CSS中.

const renderDropzoneInput = (field) => {
  const files = field.input.value;
  let dropzoneRef;

  if (files[0]) {
    console.log(files[0].preview)
  }

  return (
    <div>
      <Dropzone
        name={field.name}
        ref={(node) => { dropzoneRef = node; }}
        accept="image/jpeg, image/png"
        style={dropzoneStyle}
      >

如何使用React将文件[0] .preview传递给样式dropzoneStyle？

谢谢

在我的 create-react-app App.js 中，我有这些文件类型，但总是被拒绝。

xls - application/x-msi
pptm - application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx - application/vnd.openxmlformats-officedocument.presentationml.presentation
xlsm - application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
rtf - application/rtf

完整代码：

import React, {useCallback} from 'react';
import {useDropzone} from 'react-dropzone';

const docUploadConfig = {
  fileTypes: [
    'application/pdf',
    'application/msword',
    'application/vnd.ms-word.document.macroEnabled.12',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'application/vnd.ms-excel',
    'application/vnd.ms-excel.sheet.macroEnabled.12',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

    // excel
    'application/vnd.ms-excel',
    'application/vnd.ms-excel.sheet.macroEnabled.12',
    'application/msexcel',
    'application/x-msexcel',
    'application/x-ms-excel',
    'application/x-excel',
    'application/x-dos_ms_excel',
    'application/xls',
    'application/x-xls',
    'application/x-msi',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

    'application/vnd.ms-powerpoint',
    'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    'text/plain',
    'text/xml',

    'application/xml',

    'text/html',
    'application/rtf',
    'text/csv',
    'image/tiff',
    'image/jpeg',
    'image/png',
    'image/gif',
    'image/bmp',
    'application/x-afp',
    'application/vnd.ibm.modcap'
  ],
  minSize: 0,
  maxSize: 2097152,
  isMultipleFiles: false
}; …

我有一个表单，允许用户将多个图像上传到服务器。该表单还允许用户根据 qs 参数编辑表单。作为附加信息，我将 redux-saga 与 React 结合使用，只是为了提供更多背景知识。

我能够上传图像并允许用户在做出选择之后和上传之前预览图像。但是，在查看文档后，我没有看到当用户编辑其他表单项时填充 React-dropzone 字段的方法。我看到了一种在 onDrop 上进行预览的方法，但不能使用来自服务器的数据。我还在 Stackoverflow 上找到了这篇文章，因为我不确定它是否可以应用于 redux-saga 场景中的案例：How to add the URL of an image already uploaded, to Dropzone? 。

这可以做到吗？如果可以的话如何实现？

我使用“react-dropzone”来删除文件：

import React from "react";
import { useDropzone } from "react-dropzone";

const DropzoneUpload = ({ onDrop, accept }) => {
  // Initializing useDropzone hooks with options
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept
  });


  return (
    <div {...getRootProps()}>
      <input className="dropzone-input" {...getInputProps()} />
      <div className="text-center">
        {isDragActive ? (
          <p className="dropzone-content">Release to drop the files here</p>
        ) : (
          <p className="dropzone-content">
            Drag 'n' drop some files here, or click to select files
          </p>
        )}
      </div>
    </div>
  );
};

export …

我正在使用 React-dropzone 进行图像上传。一切正常。图像大小的验证也工作正常。但我无法检查图像的尺寸。我想验证图像的宽度和高度，以强制用户在指定的宽度和高度之间上传图像。我尝试过image.addEventListener('load')，但这不起作用。

这是我所做的

export const UploadField = ({ preview, label, uploadProps, ...props }) => {
  const {
    input: { onChange },
    disabled
  } = props;

  const {
    isDragActive,
    getRootProps,
    getInputProps,
    isDragReject,
    rejectedFiles
  } = useDropzone({
    onDrop: files => {
      onChange(
        files.map(file => {
          const image = new Image();
          image.addEventListener("load", () => {
            console.log("image", image);
          });
          return Object.assign(file, {
            preview: URL.createObjectURL(file)
          });
        })
      );
    },
    ...uploadProps
  });

  const isFileTooLarge =
    rejectedFiles.length > 0 && rejectedFiles[0].size > uploadProps.maxSize;

  const …

如何使用 select、react-dropzone 将一个或多个文件及其描述添加到组件的状态中。

我正在使用 Reactjs、dropzone 和 bootstrap，我想要实现的是：添加一个或多个文件（通过将它们拖动到某个区域），然后查看已添加文件的列表以及每个文件的选择输入（以及用户定义“类型”）将所有这些保存在一个状态中，然后将该信息发送到 API。类似于图像中出现的内容：

到目前为止，我拥有的代码返回了接受的文件列表，具体取决于其扩展名（pdf、xlsx ...）和拒绝的文件，但我不知道如何添加选择（带有选项） “类型”来自文件，可以是“摘要”、“报告”、“测试”...）并将其保存在状态中，然后将其发送到 API。

到目前为止，我使用react-dropzone的代码是这样的：

const baseStyle = {
  flex: 1,
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  padding: "20px",
  borderWidth: 2,
  borderRadius: 20,
  borderColor: "#26C2E7",
  borderStyle: "dashed",
  backgroundColor: "#fafafa",
  color: "#c4c4c4",
  outline: "none",
  transition: "border .24s ease-in-out"
};

const activeStyle = {
  borderColor: "#f2f"
};

const acceptStyle = {
  borderColor: "#f8f"
};

const rejectStyle = {
  borderColor: "#f2f"
};
function InputFiles(props) {
  const {
    acceptedFiles,
    fileRejections,
    isDragActive,
    isDragAccept,
    isDragReject,
    getRootProps, …

当我上传文件时，我的react-dropzone 'accept': { .. }参数似乎被完全忽略。

我的useDropzone({})：

    const {getRootProps, getInputProps, isDragActive} = useDropzone({
        onDrop,
        noClick: true,
        'accept': {
            'video/mp4': ['.mp4', '.MP4'],
        },
    })

我的onDrop回电：

    const onDrop = useCallback((acceptedFiles, rejectedFiles) => {

        let test =  acceptedFiles.length || rejectedFiles.length
            ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
            : "Try dropping some files.";

        console.log(test);

        if (acceptedFiles.length > 0) {
            setSelectedFiles(acceptedFiles);
        }

        acceptedFiles.forEach((file, index, array) => {

            const reader = new FileReader()

            reader.onabort = (event) => {
                console.log('file reading was aborted') …