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

Posted 2023-02-22

【中文标题】reactjs - redux 表单和材质 ui 框架 - 拖放文件上传器

【英文标题】：reactjs - redux form and material ui framework — drag and drop file uploader

【发布时间】：2021-02-01 09:44:06

【问题描述】：

我正在构建一个嵌套表单框架，它使用 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

【问题讨论】：

我提交时似乎无法让文件上传以在 redux 表单中注册 - 我认为这是因为我没有在现场传播运算符？ - 但由于设置值而出现故障？ - codesandbox.io/s/pedantic-bash-5p07i

***.com/questions/39698285/…

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

codesandbox.io/s/pensive-darwin-dpdwj

在最后一个代码框中，您似乎实现了您想要的。当您要删除文件时，该框会更改其颜色。那么这个问题的状态如何呢？

【参考方案1】：

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

【讨论】：

谢谢 - 我会检查一下 - 我遇到的问题之一是无法设置输入 - 可能是因为它只是一个常规的 html5 输入，而不是 redux 或材料 ui 部分的一部分- 我不知道如何才能得到一些基本的东西

您可以捕捉输入元素的 onChnage 事件并以您需要的方式操作数据。另外我认为如果它是常规输入标签或材料的一部分，它不会计量，它应该在这两种情况下都有效。

当我试图让它工作时出现了一些错误codesandbox.io/s/frosty-ishizaka-7wfr0 -- "无法在 'HTMLInputElement' 上设置 'value' 属性：这个输入元素接受一个文件名，这可能只能以编程方式设置为空字符串。”

我试图让一个基本的文件上传字段工作 - 但是当我点击提交按钮时它根本没有被拾取 - codesandbox.io/s/pedantic-bash-5p07iw3schools.com/howto/howto_html_file_upload_button.asp

但是@Milan Milicevic 我需要更改输入——不仅仅是从输入本身拾取 onChange 事件——所以当用户拖放文件时——我想更改输入——以编程方式

【参考方案2】：

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

【讨论】：

不，它需要成为我构建的表单框架的一部分——我需要这样的东西 "$form.find('input[type="file"]').prop('文件', 丢弃的文件);" -- 但它说它不起作用 -- 我正在尝试用 ref 隔离该字段

所以@AKC - 这意味着我不能使用我的表单框架来容纳拖放？它必须是一个仅通过 ajax 上传的独立组件 - 因为您不能以编程方式更改输入字段的值？

@TheOldCounty 这个解决方案只使用 html CSS 和纯 javascript，你可以让它独立

@TheOldCounty 这个解决方案也有关于仅使用 ajax 的指南

是的，但它不能与我的表单框架一起使用 - 我不能让拖放更改输入值