export const title = "File upload components"
export const description = "Free and open-source React file upload components built for modern applications and websites. These file uploaders are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/file-upload",
}

import { Draggable } from "@/components/application/file-upload/draggable.tsx";
import * as Demos from "@/components/application/file-upload/file-upload.demo.tsx";

<PreviewAndCode title="File upload example">
    <ResizablePreview id="preview" data-drag-constraint className="flex px-4 md:px-8 py-32 min-h-[320px] flex-col items-center gap-6 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: 512 }} className="hidden md:grid grid-cols-[repeat(3,146px)] justify-between gap-2 max-w-full">
            <Draggable name="chatgpt-clone.ts" type="application/typescript" size={1024 * 1024 * 0.5} />
            <Draggable name="commercial.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
            <Draggable name="invoice.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
        </div>
        <div className="w-full max-w-lg">
            <Demos.FileUploadProgressBar />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[512px]" component="file-upload/FileUploadProgressBar" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this file upload component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add file-upload-base
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/file-upload-base" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the file uploader components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## File upload examples

Below are examples and variations of this file upload component:

### Progress bar {{ tocOnly:true }}

<PreviewAndCode title="Progress bar">
    <ResizablePreview id="preview" data-drag-constraint className="rounded-[20px] flex px-4 md:px-8 py-32 min-h-[320px] flex-col gap-6 items-center ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: 512 }} className="hidden md:grid grid-cols-[repeat(3,146px)] justify-between gap-2 max-w-full">
            <Draggable name="chatgpt-clone.ts" type="application/typescript" size={1024 * 1024 * 0.5} />
            <Draggable name="commercial.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
            <Draggable name="invoice.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
        </div>
        <div className="w-full max-w-lg">
            <Demos.FileUploadProgressBar />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[512px]" component="file-upload/FileUploadProgressBar" />
    </TabPanel>
</PreviewAndCode>

### Progress fill {{ tocOnly:true }}

<PreviewAndCode title="Progress fill">
    <ResizablePreview id="preview" data-drag-constraint className="rounded-[20px] flex px-4 md:px-8 py-32 min-h-[320px] flex-col gap-6 items-center ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: 512 }} className="hidden md:grid grid-cols-[repeat(3,146px)] justify-between gap-2 max-w-full">
            <Draggable theme="solid" name="chatgpt-clone.ts" type="application/typescript" size={1024 * 1024 * 0.5} />
            <Draggable theme="solid" name="commercial.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
            <Draggable theme="solid" name="invoice.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
        </div>
        <div className="w-full max-w-lg">
            <Demos.FileUploadProgressFill />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[512px]" component="file-upload/FileUploadProgressFill" />
    </TabPanel>
</PreviewAndCode>

### Disabled {{ tocOnly:true }}

<PreviewAndCode title="Disabled">
    <ResizablePreview id="preview" data-drag-constraint className="rounded-[20px] flex px-4 md:px-8 py-32 min-h-[320px] flex-col gap-6 items-center ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-lg">
            <Demos.DisabledDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[512px]" component="file-upload/DisabledDemo" />
    </TabPanel>
</PreviewAndCode>

### Accept image only {{ tocOnly:true }}

<PreviewAndCode title="Accept image only">
    <ResizablePreview id="preview" data-drag-constraint className="rounded-[20px] flex px-4 md:px-8 py-32 min-h-[320px] md:min-h-[620px] flex-col items-center gap-6 ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: 512 }} className="hidden md:grid grid-cols-[repeat(3,146px)] justify-between gap-2 max-w-full">
            <Draggable name="Screenshot.png" type="image/png" size={1024 * 1024 * 0.5} />
            <Draggable name="IMG_0050.jpeg" type="image/jpeg" size={1024 * 1024 * 1.3} />
            <Draggable name="invoice.pdf" type="application/pdf" size={1024 * 1024 * 1.2} />
        </div>
        <div className="w-full max-w-lg">
            <Demos.ImagesOnlyDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[512px]" component="file-upload/ImagesOnlyDemo" />
    </TabPanel>
</PreviewAndCode>

### Max size limit {{ tocOnly:true }}

<PreviewAndCode title="Max size limit">
    <ResizablePreview id="preview" data-drag-constraint className="rounded-[20px] flex px-4 md:px-8 py-32 min-h-[320px] md:min-h-[620px] flex-col items-center gap-6 ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: 512 }} className="hidden md:grid grid-cols-[repeat(3,146px)] justify-between gap-2 max-w-full">
            <Draggable name="smaller_file.jpg" type="image/jpeg" size={1024 * 1024 * 0.5} />
            <Draggable name="too_large.mp4" type="video/mp4" size={1024 * 1024 * 2.2} />
            <Draggable name="still_too_large.pdf" type="application/pdf" size={1024 * 1024 * 1.5} />
        </div>
        <div className="w-full max-w-lg">
            <Demos.MaxSizeLimitDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[512px]" component="file-upload/MaxSizeLimitDemo" />
    </TabPanel>
</PreviewAndCode>