reactjs - redux 表单和材质 ui 框架 - 拖放文件上传器

Question

我正在构建一个嵌套表单框架，它使用 redux 表单和材料 ui 框架——我已经在这里构建了组件——https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js

我想做的-是添加一个上传字段-我看过这个例子。 How to enable file upload on React's Material UI simple input?

<Button
  variant="contained"
  component="label"
>
  Upload File
  <input
    type="file"
    style={{ display: "none" }}
  />
</Button>

但尤其是更像拖放的东西。 -- 有没有什么东西可以构建得更加定制和清洁，而无需安装另一个可能具有强制样式的模块。

https://www.npmjs.com/package/material-ui-dropzone

https://codesandbox.io/s/vj1q68zm25?file=/src/ImageUpload.js

---

---

--- 旧代码

http://jsfiddle.net/5rbqehz3/1/

---- 在此处使用 renderDragDrop 起始文件 - 调整代码，以便当用户将文件拖到区域时 - 它会填充 redux 表单字段 - 使用文件的 textarea 文件类型 --- 如果它是将多个文件添加到字段的情况 - 或动态添加字段以容纳每个文件 - 已上传。

它是我需要关注的集成部分——如果它是一种隐藏旧学校领域的情况——但是让它们被填充以响应拖放界面。

-- 最新代码 2020 年 11 月 17 日 https://codesandbox.io/s/pensive-darwin-dpdwj

11 月 22 日 - 2020 年

正常

拖动时 - 出现粉红色框并且虚线向内显示动画

我需要帮助来设置正确的样式 -- 并清理此代码库

--- 我目前的尝试 -- https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js

Answer 1

对此没有现成的解决方案。您可以按照您的建议添加一些可以修改样式的包，或者进行自定义实现。如果您决定使用自定义实现，这里有一个有用的article 方法。

Answer 2

This solution 是您想要实现的简单解决方案，它具有自动提交和点击提交功能，并且不强制样式。