رفع الملفات

import { FileUpload } from 'topclassui/file-upload'

/** One file, named by its label. The hint inside the zone describes the input. */
export default function Demo() {
  return (
    <div className="grid gap-1.5">
      <label htmlFor="file-upload-basic" className="text-sm font-medium text-body">Attachment</label>
      <FileUpload id="file-upload-basic" name="attachment" accept=".png,.jpg,.jpeg,.pdf" maxSize={10 * 1024 * 1024}>
        PNG, JPG or PDF, up to 10 MB
      </FileUpload>
    </div>
  )
}

import { FileUpload } from 'topclassui/file-upload'

/** The limits of the card's sample: up to five files, PDF or PNG, 5 MB each. maxFiles above 1 makes the input multiple. */
export default function Demo() {
  return (
    <div className="grid gap-1.5">
      <label htmlFor="file-upload-multiple" className="text-sm font-medium text-body">Attachments</label>
      <FileUpload id="file-upload-multiple" name="attachments" accept="application/pdf,image/png" maxFiles={5} maxSize={5 * 1024 * 1024}>
        PDF or PNG, up to 5 files
      </FileUpload>
    </div>
  )
}

import { Field } from 'topclassui/field'
import { FileUpload } from 'topclassui/file-upload'

/** The card's sample: a Field names the input, and its hint describes it after the zone's own. */
export default function Demo() {
  return (
    <Field name="attachments" label="Attachments" hint="PDF or PNG, up to 5 files">
      {(control) => (
        <FileUpload {...control} accept="application/pdf,image/png" maxFiles={5} maxSize={5 * 1024 * 1024}>
          Drop them here, 5 MB each
        </FileUpload>
      )}
    </Field>
  )
}

import { Button } from 'topclassui/button'
import { FileUpload } from 'topclassui/file-upload'

/** A multipart form that posts with no script: the input sends one part per file. An input cannot set the form's
 * encType, so the form writes it. Required: an empty input blocks the submit. */
export default function Demo() {
  return (
    <form method="post" encType="multipart/form-data" className="grid gap-3">
      <div className="grid gap-1.5">
        <label htmlFor="file-upload-form" className="text-sm font-medium text-body">Attachments</label>
        <FileUpload id="file-upload-form" name="attachments" maxFiles={5} required>Up to 5 files</FileUpload>
      </div>
      <div><Button type="submit">Send</Button></div>
    </form>
  )
}

import { TopClassProvider } from 'topclassui/provider'
import { FileUpload } from 'topclassui/file-upload'

/** Arabic, inside TopClassProvider as the root layout would mount it: the zone's words, the sizes and the reasons
 * come from the Arabic labels, and each file name takes its own direction. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar" className="grid gap-1.5">
        <label htmlFor="file-upload-rtl" className="text-sm font-medium text-body">المرفقات</label>
        <FileUpload id="file-upload-rtl" name="attachments" accept="application/pdf,image/png" maxFiles={5} maxSize={5 * 1024 * 1024}>
          PDF أو PNG، حتى 5 ملفات
        </FileUpload>
      </div>
    </TopClassProvider>
  )
}