UploadDropzone

Miejsce dodawania plików: przycisk wyboru, obszar upuszczania i lista trwających przesyłań z postępem i statusem. Użyj go na stronach biblioteki; FileInput w formularzach zatrzymuje pliki razem z formularzem.

UploadDropzone

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: UploadDropzone

Upload files

or drop files here

JPEG, PNG, WebP, SVG or PDF, up to 20 MB each. Images become WebP with smaller copies.

Noc, podgląd: UploadDropzone

Upload files

or drop files here

JPEG, PNG, WebP, SVG or PDF, up to 20 MB each. Images become WebP with smaller copies.

Wysoki kontrast, podgląd: UploadDropzone

Upload files

or drop files here

JPEG, PNG, WebP, SVG or PDF, up to 20 MB each. Images become WebP with smaller copies.

UżycieLink do sekcji Użycie

tsx

import { UploadDropzone } from '@skribly/ui/media'

tsx

<UploadDropzone title="Upload files" buttonLabel="Choose files" dropLabel="or drop files here"
  description="JPEG, PNG or PDF, up to 20 MB each" acceptedFileTypes={['image/*', '.pdf']}
  maxFileSize={20_000_000} rejectedMessage={(files) => `Left out: ${names(files)}`}
  onFiles={upload} uploads={uploads} statusLabels={statusLabels}
  onRetry={retry} retryLabel={(item) => `Retry ${item.name}`} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Obszar upuszczania jest strefą upuszczania React Aria: użytkownicy klawiatury i czytników ekranu mogą upuszczać do niej i wklejać skopiowany plik, gdy ma fokus.
Przycisk wyboru jest opisany przez akceptowane typy.
Każde przesyłanie jest nazwanym paskiem postępu ze statusem słowami i znakiem.
Zakończone przesyłanie jest ogłaszane w trybie polite, a nieudane od razu, z powodem; sam postęp nie jest ogłaszany, więc nigdy nie przekrzykuje strony.
Odrzucone pliki są wymienione w ostrzeżeniu, które zostaje, i nic nie znika z listy samo.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.