nili/ui
enfaartr
Tüm bileşenler

FileUpload

Genel görünüm
22 export9 varyant ekseni42 prop3 dosya
import { FileFormatIcon, FileUploadArea, FileUploadCard, ImageUpload, ImageUploadShape } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Yükleme alanı

Bırakma hedefi. onFiles, dosyalar bırakılmış da olsa iletişim kutusundan seçilmiş de olsa bir File dizisi alır; böylece tek bir kod yolu kalır. Altında gerçek bir input vardır, bu yüzden klavye ve ekran okuyucu kullanıcıları da seçiciyi alır.

import { FileUploadArea } from "@nili/ui"

export function Example() {
  return (
    <FileUploadArea
      multiple
      accept="image/*,application/pdf"
      label="Upload files"
      title="Choose a file or drag it here"
      description="PNG, JPG or PDF, up to 10 MB."
      onFiles={(files) => upload(files)}
    />
  )
}

Yükleme alanı durumları

Reddedilen bir dosya için invalid — yanlış tür, çok büyük — ve kota tükendiğinde ya da form gönderilirken disabled.

varsayılan
geçersiz
devre dışı
import { FileUploadArea } from "@nili/ui"

export function Example() {
  return (
    <>
      <FileUploadArea label="Upload" onFiles={onFiles} />
      <FileUploadArea label="Upload" invalid onFiles={onFiles} />
      <FileUploadArea label="Upload" disabled onFiles={onFiles} />
    </>
  )
}

Dosya kartı

Yüklenmiş tek bir dosya: biçim simgesi, adı, boyutu ve durumu. progress çubuğu sürer; onRetry bir hatayla, onRemove her durumda görünür. İkisi de etiket ister, çünkü düğmeler simgedir.

annual-report.pdf2.4 MB
brand-photo.png840 KB
archive.zip18 MBDosya 10 MB’tan büyük.
import { FileUploadCard } from "@nili/ui"

export function Example() {
  return (
    <>
      <FileUploadCard
        fileName="annual-report.pdf"
        fileSize="2.4 MB"
        status="progress"
        progress={62}
        onRemove={cancel}
        removeLabel="Cancel upload"
      />

      <FileUploadCard
        fileName="photo.png"
        fileSize="840 KB"
        status="success"
        onRemove={remove}
        removeLabel="Remove file"
      />

      <FileUploadCard
        fileName="archive.zip"
        fileSize="18 MB"
        status="error"
        errorMessage="File is larger than 10 MB."
        onRetry={retry}
        retryLabel="Try again"
        onRemove={remove}
        removeLabel="Remove file"
      />
    </>
  )
}

Dosya biçimi simgesi

Simge dosya adından türetilir; böylece karışık yüklemelerden oluşan bir liste kendini renklendirir. Sinyal vermek istediğiniz şey uzantı değilse color ile geçersiz kılın.

md
pdf
xlsx
pptx
docx
png
mp4
zip
json
xs
pdf
xlsx
pptx
docx
png
mp4
zip
json
import { FileFormatIcon } from "@nili/ui"

export function Example() {
  return (
    <>
      <FileFormatIcon fileName="report.pdf" />
      <FileFormatIcon fileName="sheet.xlsx" />
      <FileFormatIcon fileName="photo.png" size="xs" />
      <FileFormatIcon fileName="anything.bin" color="purple" />
    </>
  )
}

Görsel yükleme

Önizleme öncelikli varyant; bir avatar, şirket işareti ya da kapak için. shape çerçeveyi ve önizlemenin ima ettiği kırpmayı belirler; alignment denetimleri görselin altına ya da yanına koyar.

biçimler
avatar
company
square
4:3
16:9
yatay, ipucu ve eylemlerle
JPG ya da PNG, en az 256×256.
import { ImageUpload, Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <ImageUpload
        shape="avatar"
        label="Profile photo"
        hint="JPG or PNG, at least 256×256."
        onFiles={(files) => upload(files[0])}
        actions={<Button size="xs" appearance="stroke">Choose file</Button>}
      />

      <ImageUpload shape="16:9" alignment="horizontal" label="Cover" onFiles={onFiles} />
    </>
  )
}