> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# File Upload

> File upload component with drag and drop support

export const FileUploadSinglePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/FileUploadSingle" frameBorder="0" width="100%" height="400"></iframe>;

export const FileUploadWithListPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/FileUploadWithList" frameBorder="0" width="100%" height="500"></iframe>;

export const FileUploadBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/FileUploadBasic" frameBorder="0" width="100%" height="400"></iframe>;

## Overview

The FileUpload component provides file upload functionality with drag and drop support, progress tracking, and file management.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { FileUpload } from '@peppermint-design/devreadykit-custom';

    export default function FileUploadBasic() {
      const handleFiles = (files) => {
        console.log('Files:', files);
      };

    return (

    <FileUpload.Root>
      <FileUpload.DropZone
        onDropFiles={handleFiles}
        title="Click to upload"
        subtitle="SVG, PNG, JPG or GIF (max. 800x400px)"
      />
    </FileUpload.Root>
    ); }

    ```
  </Tab>

  <Tab title="Preview">
    <FileUploadBasicPreview />
  </Tab>
</Tabs>

## With File List

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { FileUpload } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function FileUploadWithList() {
      const [files, setFiles] = useState([]);

      const handleFiles = (fileList) => {
        const newFiles = Array.from(fileList).map(file => ({
          id: Math.random().toString(),
          name: file.name,
          size: file.size,
          progress: 0
        }));
        setFiles([...files, ...newFiles]);
      };

      return (
        <FileUpload.Root>
          <FileUpload.DropZone onDropFiles={handleFiles} />
          <FileUpload.List files={files} />
        </FileUpload.Root>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <FileUploadWithListPreview />
  </Tab>
</Tabs>

## Single File

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { FileUpload } from '@peppermint-design/devreadykit-custom';

    export default function FileUploadSingle() {
      const handleFiles = (files) => {
        console.log('File:', files[0]);
      };

    return (

    <FileUpload.Root>
      <FileUpload.DropZone
        onDropFiles={handleFiles}
        multiple={false}
        title="Upload single file"
      />
    </FileUpload.Root>
    ); }

    ```
  </Tab>

  <Tab title="Preview">
    <FileUploadSinglePreview />
  </Tab>
</Tabs>

## With Accept Types

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { FileUpload } from '@peppermint-design/devreadykit-custom';

    export default function FileUploadWithAccept() {
      const handleFiles = (files) => {
        console.log('Files:', files);
      };

      return (
        <FileUpload.Root>
          <FileUpload.DropZone
            onDropFiles={handleFiles}
            accept="image/*"
            title="Upload images only"
          />
        </FileUpload.Root>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <FileUploadBasicPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  \| Component | Prop | Type | Default | Description |
  \|:-----------|:------|:------|:---------|:-------------| | DropZone |
  onDropFiles | `(files: FileList) => void` | - | File drop handler | | DropZone
  \| isDisabled | `boolean` | `false` | Disabled state | | DropZone | accept |
  `string` | - | Accepted file types | | DropZone | multiple | `boolean` |
  `true` | Allow multiple files | | DropZone | title | `string` | `"Click to
      upload"` | Drop zone title | | DropZone | subtitle | `string` | - | Drop zone
  subtitle | | List | files | `UploadedFile[]` | - | Array of uploaded files |
</PropsTable>