{"id":10330,"date":"2018-08-17T09:10:14","date_gmt":"2018-08-17T14:10:14","guid":{"rendered":"http:\/\/carterembry.com\/\/?p=10330"},"modified":"2025-08-05T09:05:23","modified_gmt":"2025-08-05T14:05:23","slug":"creating-flexible-and-reusable-react-file-uploaders","status":"publish","type":"post","link":"https:\/\/carterembry.com\/de\/2018\/creating-flexible-and-reusable-react-file-uploaders\/%20","title":{"rendered":"Flexible und wiederverwendbare React File Uploader erstellen"},"content":{"rendered":"
\n
\n\t

Daniel wurde k\u00fcrzlich im Eventbrite Engineering Blog vorgestellt und wir sind sehr stolz auf die Arbeit, die er dort leistet.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

\n
\n\t\t\t\n\t\t\t\"\"\n\t\t\t<\/a><\/div>\n\n<\/div><\/div><\/div>
\n
\n\t

Das Eventbrite-Team brauchte einen React-basierten Bild-Uploader, der flexibel ist und gleichzeitig eine einfache Benutzeroberfl\u00e4che bietet. Die Komponenten des Bild-Uploaders sollten in einer Vielzahl von Szenarien als wiederverwendbare Teile funktionieren, die je nach Bedarf unterschiedlich zusammengestellt werden k\u00f6nnen. Lies weiter, um zu sehen, wie wir dieses Problem gel\u00f6st haben.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

Was ist ein Datei-Uploader?<\/h3>\n
\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n
\n\t

Wenn du in der Vergangenheit eine Datei von deinen Webnutzern abrufen wolltest, musstest du eine\u00a0Eingabetyp \"Datei\"<\/a>. Dieser Ansatz war in vielerlei Hinsicht begrenzt, vor allem dadurch, dass\u00a0es ist eine Eingabe<\/i>: Die Daten werden erst \u00fcbertragen, wenn du das Formular abschickst, sodass die Nutzer keine M\u00f6glichkeit haben, vor oder w\u00e4hrend des Hochladens ein Feedback zu sehen.<\/p>\n

In diesem Sinne sind die React-Uploader, \u00fcber die wir sprechen werden, keine Formulareingaben, sondern \"Sofort-Transport-Tools\". Der Nutzer w\u00e4hlt eine Datei aus, der Uploader transportiert sie zu einem entfernten Server und erh\u00e4lt dann eine Antwort mit einer eindeutigen Kennung. Diese Kennung wird dann sofort mit einem Datenbankeintrag verkn\u00fcpft oder in ein verstecktes Formularfeld eingetragen.<\/p>\n<\/div>\n<\/div><\/div><\/div>

\n
\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t<\/video>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n
\n\t

Diese neue Strategie bietet eine enorme Flexibilit\u00e4t gegen\u00fcber herk\u00f6mmlichen Upload-Prozessen. Durch die Entkopplung des Dateitransports von den Formular\u00fcbermittlungen k\u00f6nnen wir zum Beispiel\u00a0direkt auf Speicherpl\u00e4tze von Drittanbietern (wie Amazon S3) hochladen, ohne die Dateien \u00fcber unsere Server zu schicken<\/strong>.<\/p>\n

Der Kompromiss f\u00fcr diese Flexibilit\u00e4t ist die Komplexit\u00e4t: Drag-and-Drop-Datei-Uploader sind komplexe Gebilde. Au\u00dferdem sollte unser React-Uploader einfach und benutzerfreundlich sein. Es war keine leichte Aufgabe, einen Weg zu finden, der sowohl Flexibilit\u00e4t als auch Benutzerfreundlichkeit bietet.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

Verantwortlichkeiten festlegen<\/h3>\n
\n\t

Die Aufgaben eines Uploaders zu bestimmen, scheint einfach zu sein... er l\u00e4dt hoch, richtig? Sicherlich, aber es gibt noch eine Menge anderer Dinge, die dazu geh\u00f6ren, damit das passiert:<\/p>\n