FileInput

Dołącz pliki, wybierając je, upuszczając albo wklejając. Sprawdza typ i rozmiar i wypisuje wybrane pliki, każdy z przyciskiem usuwania.

FileInput

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: FileInput

Attachments

or drop them here

PDF or images, up to 5 MB each.

brief.pdf48 kB

1 file chosen

Avatar

or drop it here

Add an image to continue.

Noc, podgląd: FileInput

Attachments

or drop them here

PDF or images, up to 5 MB each.

brief.pdf48 kB

1 file chosen

Avatar

or drop it here

Add an image to continue.

Wysoki kontrast, podgląd: FileInput

Attachments

or drop them here

PDF or images, up to 5 MB each.

brief.pdf48 kB

1 file chosen

Avatar

or drop it here

Add an image to continue.

UżycieLink do sekcji Użycie

tsx

import { FileInput } from '@skribly/ui/forms'

tsx

<FileInput label="Attachments" buttonLabel="Choose files" dropLabel="or drop them here"
  removeLabel={(file) => `Remove ${file.name}`} allowsMultiple acceptedFileTypes={['.pdf', 'image/*']} />

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ść

Przycisk otwiera okno wyboru.
Obszar upuszczania ma własny przystanek fokusa, na którym działa przeciąganie z klawiatury i wklejanie skopiowanego pliku.
Pliki odrzucone przez typ albo rozmiar wywołują ostrzeżenie typu polite; każdy przycisk usuwania nazywa swój plik.

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