reactjs - redux form and material ui framework - drag and drop file uploader

Question

Sto costruendo un framework di form nidificato che utilizza il framework ui di redux form e material - finora ho costruito i componenti - https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js

quello che vorrei fare - è aggiungere un campo di caricamento - ho visto questo esempio. Come abilitare il caricamento di file sull'input semplice dell'interfaccia utente dei materiali di React?

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

ma in particolare qualcosa che è più simile a un dragdrop. - c'è qualcosa che potrebbe essere costruito più su misura e più pulito senza dover installare un altro modulo che forse ha stili forzati.

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

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

---

---

--- vecchio codice

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

---- usando il file di partenza renderDragDrop qui - adatta il codice in modo che quando l'utente trascina un file nell'area - popola il campo redux form - il tipo di file textarea con il file --- se è un caso di aggiunta più file al campo - o l'aggiunta di campi al volo per ospitare ogni file - caricati.

è la parte di integrazione su cui devo concentrarmi - se è un caso di nascondere alla vista i campi della vecchia scuola - ma averli popolati in risposta all'interfaccia drag and drop.

- ultimo codice 17 novembre 2020 https://codesandbox.io/s/pensive-darwin-dpdwj

22 novembre - 2020

normale

durante il trascinamento: viene visualizzata la casella rosa e la linea tratteggiata si anima verso l'interno

Ho bisogno di aiuto per ottenere gli stili corretti e per ripulire questa base di codice

--- il mio tentativo attuale - https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js

Answer 1

Non esiste una soluzione pronta all'uso per questo. Puoi, come hai suggerito, aggiungere alcuni pacchetti che possono essere modificati in base allo stile o rendere un'implementazione personalizzata. Se decidi di procedere con l'implementazione personalizzata, ecco un utile articolo su come farlo.

Answer 2

Questa soluzione è una soluzione semplice per ciò che desideri ottenere, ha sia l'invio automatico che l'invio al clic e non forza lo stile.