reactjs - reduxar formulário e estrutura da interface do usuário de material - arrastar e soltar uploader

Question

Estou construindo um framework de formulário aninhado que usa o formulário redux e o framework ui material - eu construí os componentes aqui até agora - https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js

o que eu gostaria de fazer - é adicionar um campo de upload - eu vi este exemplo. Como habilitar o upload de arquivo na entrada simples da interface de usuário do React?

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

mas, em particular, algo que se parece mais com um arrastar. - existe algo que poderia ser construído de forma mais personalizada e limpa, sem ter que instalar outro módulo que talvez tenha estilos forçados.

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

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

---

---

--- código antigo

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

---- usando o arquivo inicial renderDragDrop aqui - adapte o código de modo que quando o usuário arrastar um arquivo para a área - ele preencha o campo do formulário redux - tipo de arquivo textarea com o arquivo --- se for o caso de adicionar vários arquivos para o campo - ou adicionando campos rapidamente para hospedar cada arquivo - carregado.

é a parte de integração que preciso enfocar - se for o caso de ocultar os campos da velha guarda - mas ter que ser preenchidos em resposta à interface de arrastar e soltar.

- código mais recente 17 de novembro de 2020 https://codesandbox.io/s/pensive-darwin-dpdwj

22 de novembro - 2020

normal

ao arrastar - a caixa rosa aparece e a linha pontilhada é animada para dentro

Preciso de ajuda para encontrar os estilos certos - e limpar essa base de código

--- minha tentativa atual - https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js

Answer 1

Não existe uma solução pronta para o uso para isso. Você pode, como sugeriu, adicionar alguns pacotes que podem ser modificados no estilo ou fazer uma implementação personalizada. Se você decidir ir com a implementação customizada, aqui está um artigo útil sobre como fazê-lo.

Answer 2

Esta solução é uma solução fácil para o que você deseja alcançar, ela tem tanto o envio automático quanto o envio no clique e não força o estilo.