File Upload
FREETür ve boyut doğrulamalı, görsel önizlemeli, dosya listeli ve ilerleme çubuklu sürükle-bırak alanı.
Canlı düzenle
Ayarları değiştir; bileşen ve kodu anında güncellensin.
Ayarlar
Kod
import { FileUpload } from "@/components/ui/file-upload";
<FileUpload
accept="image/*"
maxFiles={4}
maxSize={5 * 1024 * 1024}
onValueChange={(files) => upload(files)}
/>Kurulum
Terminal
npx @bloxa/cli add file-upload
# or: npx shadcn@latest add @bloxa/file-uploadÖrnekler
Görseller ve ilerleme
Görsel bırak; önizleme ve (örnek amaçlı) yükleme ilerlemesi görünür.
Tek dosya
API
Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.
FileUpload
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| value / defaultValue | File[] | — | Seçili dosyalar. |
| onValueChange | (files: File[]) => void | — | Dosyalar değişince çağrılır. |
| accept | string | — | İzin verilen türler, ör. "image/*,.pdf". |
| multiple | boolean | true | Birden fazla dosya. |
| maxSize | number | — | Dosya başına en fazla boyut (bayt). |
| maxFiles | number | — | En fazla dosya sayısı. |
| progress | Record<string, number> | — | Dosya adına göre yükleme yüzdesi (0–100). |
| labels | { title?, browse?, hint?, ... } | — | Arayüz metinleri (çeviri için). |