Park UI Logo
GitHub
Components
File upload

File Upload

A component that allows users to upload files.

Usage

    'use client'
    import { Trash2Icon } from 'lucide-react'
    import { Button, FileUpload, IconButton } from '~/components/ui'
    
    export const Demo = (props: FileUpload.RootProps) => {
      return (
        <FileUpload.Root maxFiles={3} {...props}>
          <FileUpload.Dropzone>
            <FileUpload.Label>Drop your files here</FileUpload.Label>
            <FileUpload.Trigger asChild>
              <Button size="sm">Open Dialog</Button>
            </FileUpload.Trigger>
          </FileUpload.Dropzone>
          <FileUpload.ItemGroup>
            <FileUpload.Context>
              {({ acceptedFiles }) =>
                acceptedFiles.map((file, id) => (
                  <FileUpload.Item key={id} file={file}>
                    <FileUpload.ItemPreview type="image/*">
                      <FileUpload.ItemPreviewImage />
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <FileUpload.ItemDeleteTrigger asChild>
                      <IconButton variant="link" size="sm">
                        <Trash2Icon />
                      </IconButton>
                    </FileUpload.ItemDeleteTrigger>
                  </FileUpload.Item>
                ))
              }
            </FileUpload.Context>
          </FileUpload.ItemGroup>
          <FileUpload.HiddenInput />
        </FileUpload.Root>
      )
    }
    

    Installation

    npx @park-ui/cli components add file-upload