标签: react-dropzone

我正在尝试了解有关为即将到来的项目处理文件的更多信息。当 onDrop 碰巧更改我正在上传的文件的内容时，我可以使用 react-dropzone 运行一个函数吗？例如，如果我要上传一个 Word 文档，上面写着“大家好”，我如何将内容更改为“嗨，尼克博士”？

在尝试进行更改之前，我曾尝试使用 filereader api 访问数据。我尝试在 async 函数的大括号打开后立即使用 filereader，但无法使其正常工作。

import React from 'react';
import Dropzone from 'react-dropzone';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const FileUpload = ({
    children, disableClick, channelId, mutate, style = {},
}) => (
    <Dropzone
        style={style}
        className="ignore"
        onDrop={async ([file]) => {
            const response = await mutate({
                variables: {
                    channelId,
                    file,
                },
            });
            console.log(response);
        }}
        disableClick={disableClick}
    >
        {children}
    </Dropzone>
);

const createFileMessageMutation = gql`
  mutation($channelId: Int!, $file: File) { …

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

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

onDrop这是我的回调 \xe2\x80\x94的代码

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

当用户单击提交按钮时如何调用 axios？

无法在提交按钮上添加 onclick 事件处理程序，我应该在哪里声明 onClick 事件函数，该函数在此代码中调用 axios 或接受 AcceptedFiles 变量。

useCallback 在用户删除文件时被调用，当用户删除文件时文件会自动上传。我希望在用户单击提交按钮时上传文件。

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


function Basic(props) {

const onDrop = useCallback(acceptedFiles => {
    let formData = new FormData();

    for (var i = 0; i < acceptedFiles.length; i++) {
        let file = acceptedFiles[i];
        formData.append('articleFiles[]', file);
    }  

    axios({
      method: 'post',

      data: formData,
      )}


}, [])
const {acceptedFiles, getRootProps, getInputProps} = useDropzone({onDrop});


const files = acceptedFiles.map(file => (
    <li key={file.path}> …

我正在使用带有 dropzone 的 react-hooks。

所以，我的代码看起来像这样：

const onDrop = (acceptedFiles) => {
  console.log(acceptedFiles);
};

const { getRootProps, getInputProps } = useDropzone({ onDrop });
return (
  <div {...getRootProps()} className="dropzone-container">
    <input {...getInputProps()} multiple={false} />
    // My component here
  </div>
)

现在，当我点击 dropzone 时，我只能选择 1 个文件。这很酷。

但是当我在 dropzone 上放置多个文件时，所有文件都被接受。我的意思是在 onDrop 方法中，我得到了 AcceptedFiles 参数中的所有文件。

有人能指出为什么会这样吗？我在这里做错了什么吗？

我正在使用https://yuvaleros.github.io/material-ui-dropzone/并且我正在尝试使其不允许上传以前上传的文件的副本。

如果已经嵌入了具有该名称的文件，但我不知道如何删除此图形onchange，我尝试了从文件中删除文件的功能：<input type="file"><DropzoneArea>

我还查看了 Material UI Dropzone 的文档，但没有任何运气

我正在尝试使用 React 和react-dropzone创建多重上传拖放。一切都很好，除了我似乎无法获取上传的进度信息，即使我正在使用onUploadProgress。

这是我正在使用的代码：

const onDrop = useCallback((acceptedFiles) => {
  acceptedFiles.forEach((file) => {
    let response = axios.put(`/api/files-endpoint`, file, {
      onUploadProgress: (progressEvent) => {
        console.log(`progress ${progressEvent}`);
      },
    });
  });

  setFiles(acceptedFiles);
}, []);

难道我做错了什么？在浏览器中，我尝试使用 Firefox 和 Chrome，甚至将连接限制为慢速 3G，看看它是否会在这些情况下触发该条件，但仍然没有运气。任何帮助表示赞赏。

我在这里寻找 reactjs 中的上传文件夹。我在那个 doc 和 docx 文件中有文件夹，我只想在用户单击浏览按钮时上传文件夹。我必须不允许用户选择单个文件。有人可以给我一个简单的文件夹上传示例或文件夹选择，其中用户只能选择文件夹而不是文件。实际上，我正在查看 react-dropzone 库，但不明白如何将其用于文件夹选择或上传。如果有人可以指导我或给我一个简单的示例，其中显示文件夹上传示例，这将有很大帮助。提前致谢。

我有两个组件，首先是 Formik 表单：

<Formik
  initialValues={{files: []}}
  onSubmit={values => {
  console.log(values)}}>
    {props => (
      <form onSubmit={props.handleSubmit}>
        <UploadComponent/>
        <button type="submit"></button>
      </form>
    )}
</Formik>

其次是上传组件：

const UploadComponent = () => {
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })))
    }
  })
  return (
    <div>
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag and drop some files here, or click to select files</p>
      </div>
   </div>
  )

我想将这些文件作为 Formik 的值，我向 …

我本来以为这是有问题的react-redux,axios,lodash,和/或react-dropzone; 但是,文件上传正常,但仍会触发此错误.(即使在控制台中显示"失败",文件也会被发布到服务器).

我开始认为这个问题可能与react-router-redux我在这里读到的内容有关:

https://github.com/reactjs/react-router-redux/issues/182

但是,这些建议对我不起作用.

无论如何,我得到一个Uncaught TypeError: Cannot read property 'type' of undefined我无法确定是什么导致它或如何解决它.以下是错误的一些屏幕截图:

所以这里应该是相关的react-router.只是不确定发生了什么.

切入点:

// ./react/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { routerMiddleware, ConnectedRouter } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';

// Render on every …

我有一个SpeedDialAction（@material-ui/lab@4.0.0-alpha.56），可以打开文件对话框。如果您选择一个或多个文件，它将打开一个material-ui 模式对话框。它正在使用react-dropzone，但我不知道这是否与这里相关。在操作单击处理程序开始时，我将open状态设置为SpeedDialto false，然后它关闭。当你：

• 取消文件对话框
• 取消材质-ui 对话框
• 从material-ui对话框提交

...然后调用SpeedDial组件的回调，并作为原因传递。我不确定为什么会发生这种情况，或者到底是哪个组件驱动了这种行为。有没有简单的方法来抑制这种情况？onOpen'focus'