Skip to content
All 6 kits from $99 · Everything Bundle $149

File Upload

InputMIT
View in Storybook

Drag-and-drop file upload with preview, validation, and progress.

bun add @otfdashkit/ui

Preview

File Upload
Loading Storybook preview…

Code

import React, { useState } from 'react'
import { FileUpload, FileUploadPreview } from '@otfdashkit/ui'

function FileUploadDemo() {
  const [files, setFiles] = useState<File[]>([])
  return (
    <div className="flex flex-col gap-3 max-w-sm">
      <FileUpload accept="image/*" multiple maxSize={5 * 1024 * 1024} onFiles={(f) => setFiles(p => [...p, ...f])} />
      <FileUploadPreview files={files} onRemove={i => setFiles(f => f.filter((_, idx) => idx !== i))} />
    </div>
  )
}

export function Example() {
  return (
    <FileUploadDemo />
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the FileUpload source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
acceptstring
classNamestring
disabledboolean
maxSizenumber
multipleboolean
onFiles(files: File[]) => void

Upload progress bar

Pair the file upload with OTF's Progress component. Pass the current upload percentage as its value.

import { Progress } from '@otfdashkit/ui'

<Progress value={65} aria-label="Upload progress" />