Drop-Zone mit Upload-Fortschritt
Dateien hineinziehen oder per Klick wählen: Die Zone leuchtet auf und jede Datei lädt mit eigenem Balken hoch.
Einstellungen
Code
<div class="uv-ifd"><label class="dz"><input type="file" multiple><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V4M7.5 8.5L12 4l4.5 4.5"/><path d="M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15"/></svg></span><b>Dateien hierher ziehen</b><span class="or">oder <u>auf dem Computer suchen</u></span><span class="hn">PNG, JPG oder PDF bis 10 MB</span></label><ul aria-live="polite"></ul></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Upload-Bereiche sollten sowohl Leute bedienen, die Dateien ziehen, als auch solche, die den Dateidialog bevorzugen. Diese gestrichelte Zone umschließt ein echtes File-Input, leuchtet beim Darüberziehen auf, lässt ihr Symbol hüpfen und listet jede Datei mit Fortschrittsbalken und Prozentwert, die mit einem Haken enden. Die Liste behält die letzten drei.
In der Demo ist der Fortschritt simuliert. Hänge deine Upload-Anfrage in die add-Funktion, um ihn mit echten Events zu steuern. Formate und Größe stehen im Hinweis darunter.