HextaUI
156Başlayın
HextaUI

BetaVercel UI SDK 0.1.0-beta.2 üzerine kurulu. API’si değişebilir.

File input

Vercel UI SDK üzerinde bırakma alanı, yapıştırma, tür ve boyut denetimi, gerekçeleriyle reddedilen dosyalar, görsel önizlemeleri ve form desteği olan bir dosya girişi.

Bağımlılıklar
  • @tabler/icons-react
  • @ui-sdk/core
  • @ui-sdk/react
  • class-variance-authority

Drop files here

Images or PDFs, up to 5 files of 5 MB each. You can paste them too.

import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneIcon,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputList,
  FileInputRejections,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputDemo() {
  return (
    <FileInput
      multiple
      accept={["image/*", ".pdf"]}
      maxFiles={5}
      maxSize={5_000_000}
      className="max-w-md"
    >
      <FileInputDropzone>
        <FileInputDropzoneIcon />
        <FileInputDropzoneTitle>Drop files here</FileInputDropzoneTitle>
        <FileInputDropzoneDescription>
          Images or PDFs, up to 5 files of 5 MB each. You can paste them too.
        </FileInputDropzoneDescription>
        <FileInputTrigger className="mt-3">Browse files</FileInputTrigger>
      </FileInputDropzone>
      <FileInputRejections />
      <FileInputList aria-label="Files">
        <FileInputItem />
      </FileInputList>
    </FileInput>
  )
}

export { UiSdkFileInputDemo }

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-file-input.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

UI SDK, ui-sdk adlı bir cascade katmanında kendi CSS’ini biraz ekler. Sınıflarınızın kazanması için bu katmanı genel stil dosyanızın en üstünde, Tailwind import’unun üzerinde tanımlayın.

@layer ui-sdk;

@import "tailwindcss";
import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneIcon,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputList,
  FileInputRejections,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"
<FileInput multiple accept="image/*" maxSize={5_000_000}>
  <FileInputDropzone>
    <FileInputDropzoneIcon />
    <FileInputDropzoneTitle>Drop files here</FileInputDropzoneTitle>
    <FileInputTrigger>Browse files</FileInputTrigger>
  </FileInputDropzone>
  <FileInputRejections />
  <FileInputList aria-label="Files">
    <FileInputItem />
  </FileInputList>
</FileInput>

Dosya girişi, kişilerin seçtiği, bıraktığı veya yapıştırdığı dosyaları tutar ve bir formla gönderir. Yüklemek uygulamanıza kalır. Çocuğu olmayan FileInputItem, listedeki her dosya için önizleme, ad, boyut ve kaldırma düğmesi olan hazır bir satır çizer.

accept, boyut, sayı ve validate denetimleri yalnızca tarayıcıda çalışır; bir dosyanın neden dışarıda kaldığını erkenden söyler. Herkes bunları atlayabilir, bu yüzden her yüklemeyi sunucunuzda yeniden denetleyin.

Kompozisyon

FileInput
├── FileInputTrigger
├── FileInputDropzone
│   ├── FileInputDropzoneIcon
│   ├── FileInputDropzoneTitle
│   ├── FileInputDropzoneDescription
│   └── FileInputTrigger
├── FileInputRejections
└── FileInputList
    └── FileInputItem
        ├── FileInputItemPreview
        ├── FileInputItemContent
        │   ├── FileInputItemName
        │   └── FileInputItemSize
        └── FileInputItemRemove

Örnekler

Kabul edilen türler ve sınırlar

Örneği aç: Kabul edilen türler ve sınırlar

accept, MIME türlerini, joker karakterleri ve uzantıları alır. maxFiles, minSize ve maxSize sınırları belirler, validate kendi denetimlerinizi ekler. FileInputRejections, dışarıda kalan her dosyayı tüm nedenleriyle, kabul edilen bir sonraki dosyaya kadar listeler.

"use client"

import * as React from "react"

import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputList,
  FileInputRejections,
  FileInputTrigger,
  createFileInputController,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputLimits() {
  const [files] = React.useState(createFileInputController)

  return (
    <FileInput
      multiple
      controller={files}
      accept=".pdf"
      maxFiles={3}
      minSize={1}
      maxSize={2_000_000}
      validate={(file) =>
        files.getValue().some((other) => other.name === file.name)
          ? "Already added"
          : null
      }
      className="max-w-md"
    >
      <FileInputDropzone className="min-h-32">
        <FileInputDropzoneTitle>Drop up to 3 PDFs</FileInputDropzoneTitle>
        <FileInputDropzoneDescription>
          2 MB each, no empty files and no duplicates.
        </FileInputDropzoneDescription>
        <FileInputTrigger className="mt-3">Choose PDFs</FileInputTrigger>
      </FileInputDropzone>
      <FileInputRejections />
      <FileInputList aria-label="PDFs">
        <FileInputItem />
      </FileInputList>
    </FileInput>
  )
}

export { UiSdkFileInputLimits }

Görsel önizlemeleri

Örneği aç: Görsel önizlemeleri

FileInputItemPreview, dosya gidince iptal ettiği bir nesne URL’sinden görsel, diğer türler için simge gösterir. layout="grid" ile her dosya kare bir kutucuktur.

import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneIcon,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputList,
  FileInputRejections,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputImages() {
  return (
    <FileInput
      multiple
      accept="image/*"
      maxFiles={6}
      maxSize={10_000_000}
      className="max-w-md"
    >
      <FileInputDropzone className="min-h-32">
        <FileInputDropzoneIcon />
        <FileInputDropzoneTitle>Add photos</FileInputDropzoneTitle>
        <FileInputDropzoneDescription>
          Up to 6 images, 10 MB each.
        </FileInputDropzoneDescription>
        <FileInputTrigger className="mt-3">Choose photos</FileInputTrigger>
      </FileInputDropzone>
      <FileInputRejections />
      <FileInputList aria-label="Photos" layout="grid">
        <FileInputItem />
      </FileInputList>
    </FileInput>
  )
}

export { UiSdkFileInputImages }

Yükleme düğmesi

Örneği aç: Yükleme düğmesi

Tek başına bir tetikleyici, sistemin dosya seçicisini açar. multiple olmadan yeni bir dosya mevcut olanın yerini alır ve kökün çocukları durumunun bir fonksiyonu olabilir.

"use client"

import { IconUpload } from "@tabler/icons-react"

import { FileInput, FileInputTrigger } from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputButton() {
  return (
    <FileInput accept=".pdf,.doc,.docx">
      {(state) => (
        <div className="flex min-w-0 items-center gap-3">
          <FileInputTrigger>
            <IconUpload aria-hidden="true" />
            {state.value[0] ? "Replace resume" : "Upload resume"}
          </FileInputTrigger>
          <span className="min-w-0 truncate text-sm text-muted-foreground">
            {state.value[0]?.name ?? "No file chosen"}
          </span>
        </div>
      )}
    </FileInput>
  )
}

export { UiSdkFileInputButton }

İstem ekleri

Örneği aç: İstem ekleri

variant="composer" ile bırakma alanı bir mesaj kutusunu saran kart olur, layout="chips" ise dosyaları küçük çipler olarak listeler. pasteTarget, metin alanına yapıştırılan ekran görüntülerini alır; yapıştırılan metin metin olarak kalır.

"use client"

import * as React from "react"
import { IconArrowUp, IconPaperclip } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  FileInput,
  FileInputDropzone,
  FileInputItem,
  FileInputList,
  FileInputRejections,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputAttachments() {
  const message = React.useRef<HTMLTextAreaElement>(null)

  return (
    <FileInput multiple maxFiles={4} maxSize={20_000_000} className="max-w-lg">
      <FileInputDropzone
        variant="composer"
        pasteTarget={() => message.current}
      >
        <FileInputList aria-label="Attachments" layout="chips">
          <FileInputItem />
        </FileInputList>
        <textarea
          ref={message}
          aria-label="Message"
          placeholder="Ask anything, or paste a screenshot"
          rows={2}
          className="field-sizing-content max-h-40 min-h-12 w-full resize-none bg-transparent px-2 py-1.5 text-sm outline-none placeholder:text-muted-foreground pointer-coarse:text-touch"
        />
        <div className="flex items-center justify-between">
          <FileInputTrigger
            variant="ghost"
            size="icon-sm"
            aria-label="Attach files"
          >
            <IconPaperclip aria-hidden="true" />
          </FileInputTrigger>
          <Button type="button" size="icon-sm" shape="pill" aria-label="Send">
            <IconArrowUp aria-hidden="true" />
          </Button>
        </div>
      </FileInputDropzone>
      <FileInputRejections />
    </FileInput>
  )
}

export { UiSdkFileInputAttachments }

Sayfanın her yerine bırakma

Örneği aç: Sayfanın her yerine bırakma

target="document" ve variant="overlay" ile alan, dosyalar pencere üzerinde sürüklenirken sayfayı kaplar ve her yere bırakılan dosyaları alır. Başka bir alana bırakılan dosyalar o alanda kalır.

import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneIcon,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputList,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputPageDrop() {
  return (
    <FileInput multiple className="max-w-md">
      <div className="flex items-center justify-between gap-3">
        <p className="m-0 text-sm text-muted-foreground">
          Drop files anywhere on this page.
        </p>
        <FileInputTrigger>Upload files</FileInputTrigger>
      </div>
      <FileInputDropzone target="document" variant="overlay">
        <FileInputDropzoneIcon />
        <FileInputDropzoneTitle>Drop to attach</FileInputDropzoneTitle>
        <FileInputDropzoneDescription>
          Files land in the list below.
        </FileInputDropzoneDescription>
      </FileInputDropzone>
      <FileInputList aria-label="Attachments">
        <FileInputItem />
      </FileInputList>
    </FileInput>
  )
}

export { UiSdkFileInputPageDrop }

Klasörler

Örneği aç: Klasörler

directory bütün bir klasörü seçer ve multiple özelliğini açar. Öğe adları klasör içindeki yolu gösterir.

import { IconFolder } from "@tabler/icons-react"

import {
  FileInput,
  FileInputItem,
  FileInputList,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputFolders() {
  return (
    <FileInput directory className="max-w-md">
      <FileInputTrigger className="self-start">
        <IconFolder aria-hidden="true" />
        Choose a folder
      </FileInputTrigger>
      <div className="max-h-72 overflow-y-auto overscroll-contain p-1 empty:hidden">
        <FileInputList aria-label="Folder contents">
          <FileInputItem />
        </FileInputList>
      </div>
    </FileInput>
  )
}

export { UiSdkFileInputFolders }

Kontrollü

Örneği aç: Kontrollü

value ve onValueChange verin. createFileInputController() ile oluşturulan bir denetleyici, seçiciyi herhangi bir düğmeden açar, dosyaları temizler ya da ekler.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  FileInput,
  FileInputItem,
  FileInputList,
  createFileInputController,
  formatFileSize,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputControlled() {
  const [files, setFiles] = React.useState<File[]>([])
  const [picker] = React.useState(createFileInputController)
  const total = files.reduce((sum, file) => sum + file.size, 0)

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        <Button size="sm" variant="outline" onClick={() => picker.open()}>
          Choose files
        </Button>
        <Button
          size="sm"
          variant="ghost"
          disabled={files.length === 0}
          onClick={() => picker.clear()}
        >
          Clear
        </Button>
        <span className="ms-auto text-sm text-muted-foreground tabular-nums">
          {files.length === 0
            ? "No files"
            : `${files.length} ${files.length === 1 ? "file" : "files"}, ${formatFileSize(total)}`}
        </span>
      </div>
      <FileInput
        multiple
        controller={picker}
        value={files}
        onValueChange={(value) => setFiles(value)}
      >
        <FileInputList aria-label="Chosen files">
          <FileInputItem />
        </FileInputList>
      </FileInput>
    </div>
  )
}

export { UiSdkFileInputControlled }

Form

Örneği aç: Form

Bir name ile dosyalar, sayfa hidrate olmadan önce bile yerel bir dosya girişiyle gönderilir. Reddedilen dosyalar asla gönderilmez, formu sıfırlamak listeyi boşaltır.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputList,
  FileInputRejections,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputForm() {
  const [submitted, setSubmitted] = React.useState<string[] | null>(null)

  return (
    <form
      className="flex w-full max-w-md flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        setSubmitted(
          data
            .getAll("attachments")
            .flatMap((entry) =>
              entry instanceof File && entry.name ? [entry.name] : []
            )
        )
      }}
      onReset={() => setSubmitted(null)}
    >
      <FileInput name="attachments" multiple maxSize={10_000_000}>
        <FileInputDropzone className="min-h-32">
          <FileInputDropzoneTitle>Attach files</FileInputDropzoneTitle>
          <FileInputDropzoneDescription>
            Up to 10 MB each.
          </FileInputDropzoneDescription>
          <FileInputTrigger className="mt-3">Browse files</FileInputTrigger>
        </FileInputDropzone>
        <FileInputRejections />
        <FileInputList aria-label="Attachments">
          <FileInputItem />
        </FileInputList>
      </FileInput>
      <div className="flex items-center gap-3">
        <Button type="submit" size="sm">
          Submit
        </Button>
        <Button type="reset" size="sm" variant="ghost">
          Reset
        </Button>
      </div>
      <p className="m-0 text-sm text-muted-foreground">
        {submitted === null
          ? "Nothing submitted yet."
          : submitted.length
            ? `Submitted ${submitted.join(", ")}`
            : "Submitted with no files."}
      </p>
    </form>
  )
}

export { UiSdkFileInputForm }

Geçersiz

Örneği aç: Geçersiz

invalid, bırakma alanını ve tetikleyiciyi işaretler; tetikleyici bunu ekran okuyuculara bildirir. Tetikleyicinin aria-describedby özniteliğini mesajınıza yönlendirin.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputList,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputInvalid() {
  const [invalid, setInvalid] = React.useState(false)
  const errorId = React.useId()

  return (
    <form
      noValidate
      className="flex w-full max-w-md flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        const proof = data.get("proof")
        setInvalid(!(proof instanceof File && proof.name))
      }}
    >
      <FileInput
        name="proof"
        accept={["image/*", ".pdf"]}
        invalid={invalid}
        onValueChange={(value) => {
          if (value.length) setInvalid(false)
        }}
      >
        <FileInputDropzone className="min-h-32">
          <FileInputDropzoneTitle>Proof of address</FileInputDropzoneTitle>
          <FileInputDropzoneDescription>
            A utility bill or bank statement from the last 3 months.
          </FileInputDropzoneDescription>
          <FileInputTrigger
            className="mt-3"
            aria-describedby={invalid ? errorId : undefined}
          >
            Choose a file
          </FileInputTrigger>
        </FileInputDropzone>
        {invalid ? (
          <p id={errorId} className="m-0 text-sm text-destructive">
            Add a scan to continue.
          </p>
        ) : null}
        <FileInputList aria-label="Proof of address">
          <FileInputItem />
        </FileInputList>
      </FileInput>
      <Button type="submit" size="sm" className="self-start">
        Continue
      </Button>
    </form>
  )
}

export { UiSdkFileInputInvalid }

Devre dışı

Örneği aç: Devre dışı

Devre dışı bir dosya girişi seçimleri, bırakmaları ve yapıştırmaları yok sayar ve hiçbir şey göndermez.

import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneIcon,
  FileInputDropzoneTitle,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputDisabled() {
  return (
    <FileInput disabled className="max-w-md">
      <FileInputDropzone>
        <FileInputDropzoneIcon />
        <FileInputDropzoneTitle>Uploads are paused</FileInputDropzoneTitle>
        <FileInputDropzoneDescription>
          Drops and pastes are ignored while the file input is disabled.
        </FileInputDropzoneDescription>
        <FileInputTrigger className="mt-3">Browse files</FileInputTrigger>
      </FileInputDropzone>
    </FileInput>
  )
}

export { UiSdkFileInputDisabled }

Sağdan sola

Örneği aç: Sağdan sola

Satırlar ve bırakma alanı yansır, dosya adları kendi yönünü korur, boyutlar verdiğiniz yerel ayarda biçimlenir.

"use client"

import {
  FileInput,
  FileInputDropzone,
  FileInputDropzoneDescription,
  FileInputDropzoneIcon,
  FileInputDropzoneTitle,
  FileInputItem,
  FileInputItemContent,
  FileInputItemName,
  FileInputItemPreview,
  FileInputItemRemove,
  FileInputItemSize,
  FileInputList,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md">
      <FileInput multiple accept="image/*">
        <FileInputDropzone className="min-h-32">
          <FileInputDropzoneIcon />
          <FileInputDropzoneTitle>أفلت الصور هنا</FileInputDropzoneTitle>
          <FileInputDropzoneDescription>
            أو الصقها من الحافظة.
          </FileInputDropzoneDescription>
          <FileInputTrigger className="mt-3">تصفح الملفات</FileInputTrigger>
        </FileInputDropzone>
        <FileInputList aria-label="الصور">
          <FileInputItem>
            {({ file }) => (
              <>
                <FileInputItemPreview />
                <FileInputItemContent>
                  <FileInputItemName />
                  <FileInputItemSize locale="ar" />
                </FileInputItemContent>
                <FileInputItemRemove aria-label={`إزالة ${file.name}`} />
              </>
            )}
          </FileInputItem>
        </FileInputList>
      </FileInput>
    </div>
  )
}

export { UiSdkFileInputRtl }

Klavye

TuşAction
TabTetikleyiciye, sonra listeye geçer; son odaklanan dosyaya ya da ilkine.
EnterSpaceTetikleyiciden dosya seçiciyi açar.
↑↓←→Listedeki dosyalar arasında gezinir.
HomeEndİlk ya da son dosyaya gider.
DeleteBackspaceOdaktaki dosyayı kaldırır ve sonrakine odaklanır.
⌘VOdak bırakma alanında ya da yapıştırma hedefindeyken dosya yapıştırır.

Erişilebilirlik

Bırakma alanı bir denetim değildir; klavye ya da ekran okuyucu kullananlar için yanında her zaman bir tetikleyici bulundurun. Liste tek bir sekme durağıdır; her kaldırma düğmesi dosyasının adını taşır, örneğin “Remove photo.png”, ve öğede Delete aynı işi yaptığı için sekme sırasının dışında kalır.

Kabul edilen, kaldırılan ve reddedilen dosyalar kibar bir canlı bölgeyle İngilizce duyurulur. Kendi dilinizde söylemek için announcement, gerekçeler için FileInputRejections bileşenine getReasonLabel verin. Bırakma alanı simgesi yalnızca harekete izin varken yükselir, yeni satırlar da yalnızca o zaman belirerek gelir.

API referansı

Her parça aynı adlı UI SDK parçasını sarar ve render ile parçanın durumuna bağlı bir fonksiyon olabilen className dahil tüm prop’larını kabul eder.

FileInput

PropTürVarsayılan
value
File[]–
defaultValue
File[][]
onValueChangedetails; nedeni ve eklenen, kaldırılan ve reddedilen dosyaları içerir.
(value: File[], details) => void–
onRejectHiçbiri kabul edilmese bile, dosyalar denetimlerden geçemediğinde çalışır.
(rejected: FileRejection[], details) => void–
accept
string | string[]–
multiple
booleanfalse
maxFiles
number–
maxSizeBayt cinsinden.
number–
minSizeBayt cinsinden.
number–
validateYerleşik denetimlerden sonra dosyayı reddetmek için bir neden döndürün.
(file: File) => string | null–
directory
booleanfalse
captureTelefonlarda kamerayı açar.
"user" | "environment" | boolean–
invalid
booleanfalse
disabled
booleanfalse
required
booleanfalse
name
string–
form
string–
announcementBir değişiklikten sonra ekran okuyucuların duyduğu.
(change) => string | null–
controllercreateFileInputController() ile oluşturulur.
FileInputController–
children
ReactNode | (state) => ReactNode–
ÖznitelikAçıklama
data-slot="file-input"CSS’te dosya girişini hedefler.
data-draggingDosyalar bırakma alanlarından birinin üzerinde sürüklenirken bulunur.
data-invalidGeçersiz olduğunda bulunur.
data-requiredBir dosya zorunlu olduğunda bulunur.
data-disabledDevre dışıyken bulunur.

FileInputDropzone

PropTürVarsayılan
variantKesikli çizgili bir alan, bir mesaj yazma alanını saran bir kart ya da sürüklerken görünen tam sayfa bir katman.
"default" | "composer" | "overlay""default"
target
"element" | "document""element"
pasteTargetYapıştırılan dosyaların alınacağı başka bir yer.
"document" | string | Element | () => Element–
render
ReactElement | (props, state) => ReactElement–
ÖznitelikAçıklama
data-slot="file-input-dropzone"CSS’te bırakma alanını hedefler.
data-variantVaryant: default, composer ya da overlay.
data-draggingDosyalar üzerinde sürüklenirken bulunur.
data-drag-acceptSürüklenen dosyalar türlerine ve sayılarına göre kabul edilebilir göründüğü sürece bulunur.
data-drag-rejectSürüklenen bir dosyanın türü kabul edilmiyorsa ya da çok fazla dosya varsa bulunur.
data-disabledDevre dışıyken bulunur.

FileInputTrigger

PropTürVarsayılan
variant
Button variant"outline"
size
Button size"sm"
controllerAraç çubuğundaki gibi dosya girişinin dışındaki bir tetikleyiciyi bağlar.
FileInputController–
render
ReactElement | (props, state) => ReactElement–

FileInputList

PropTürVarsayılan
layoutSatırlar, kare görsel kutucukları ya da küçük çipler. Öğeler görünümünü buradan alır.
"list" | "grid" | "chips""list"
render
ReactElement | (props, state) => ReactElement–
ÖznitelikAçıklama
data-slot="file-input-list"CSS’te listeyi hedefler.
data-layoutDüzen: list, grid ya da chips. Öğeler de bunu taşır.

FileInputItem

PropTürVarsayılan
childrenVarsayılan olarak önizleme, ad, boyut ve kaldırma düğmesi. Durum, dosyayı ve dizinini içerir.
ReactNode | (state) => ReactNode–
render
ReactElement | (props, state) => ReactElement–
ÖznitelikAçıklama
data-slot="file-input-item"CSS’te bir dosyanın satırını hedefler.
data-disabledDevre dışıyken bulunur.

FileInputItemPreview

ÖznitelikAçıklama
data-slot="file-input-item-preview"CSS’te önizlemeyi hedefler.
data-kindGörsel önizleme için image, dosya türüne göre simge için icon.

FileInputItemSize

PropTürVarsayılan
localeBoyutu, örneğin 2.4 kB, bu yerel ayarda biçimlendirir. Varsayılan, tarayıcınınkidir.
string–

FileInputItemRemove

PropTürVarsayılan
childrenVarsayılan olarak bir X simgesi.
ReactNode–
render
ReactElement | (props, state) => ReactElement–

FileInputRejections

PropTürVarsayılan
getReasonLabelHer nedeni adlandırır. Varsayılan İngilizcedir, örneğin “Larger than 5 MB”.
(reason, rules, rejection) => string–
ÖznitelikAçıklama
data-slot="file-input-rejections"CSS’te reddedilen dosyaların listesini hedefler.

İlgili