Reactjs - Redux Form und Material UI Framework - Drag & Drop Datei Uploader

Question

Ich erstelle ein verschachteltes Formular-Framework, das das Redux-Formular- und Material-UI-Framework verwendet. Ich habe die Komponenten hier bisher erstellt. https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js

Was ich tun möchte - ist ein Upload-Feld hinzufügen - ich habe dieses Beispiel gesehen. Wie aktiviere ich das Hochladen von Dateien über die einfache Eingabe der Material-Benutzeroberfläche von React?

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

aber insbesondere etwas, das eher einem Dragdrop ähnelt. - Gibt es etwas, das maßgeschneiderter und sauberer gebaut werden könnte, ohne dass ein anderes Modul installiert werden muss, das möglicherweise erzwungene Stile aufweist?

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

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

---

---

--- alter Code

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

---- Verwenden Sie hier die RenderDragDrop-Startdatei. Passen Sie den Code so an, dass der Benutzer beim Ziehen einer Datei in den Bereich das Redux-Formularfeld - Textbereich-Dateityp - mit der Datei füllt Mehrere Dateien zum Feld hochgeladen - oder Felder im laufenden Betrieb hinzugefügt, um jede Datei aufzunehmen - hochgeladen.

Es ist der Integrationsteil, auf den ich mich konzentrieren muss - wenn es darum geht, die Felder der alten Schule nicht zu sehen -, aber sie als Reaktion auf die Drag & Drop-Oberfläche auszufüllen.

- letzter Code 17. November 2020 https://codesandbox.io/s/pensive-darwin-dpdwj

22. November - 2020

normal

Beim Ziehen wird das rosa Feld angezeigt und die gepunktete Linie wird nach innen animiert

Ich brauche Hilfe, um die richtigen Stile zu finden - und diese Codebasis zu bereinigen

--- mein aktueller Versuch - https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js

Answer 1

Hierfür gibt es keine sofort einsatzbereite Lösung. Sie können, wie vorgeschlagen, einige Pakete hinzufügen, die stilistisch geändert werden können, oder eine benutzerdefinierte Implementierung vornehmen. Wenn Sie sich für eine benutzerdefinierte Implementierung entscheiden, finden Sie hier einen nützlichen Artikel dazu.

Answer 2

Diese Lösung ist eine einfache Lösung für das, was Sie erreichen möchten. Sie verfügt sowohl über die automatische Übermittlung als auch über die Übermittlung beim Klicken und erzwingt keinen Stil.