File upload components

Learn how to use the file upload components in your project.

File upload example

Get the code

chatgpt-clone.ts

commercial.mp4

invoice.pdf

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

  • Example dashboard screenshot.jpg

    720 KB

    Uploading...

    50%

  • Tech design requirements_2.pdf

    720 KB

    Complete

    100%

  • Tech design requirements.pdf

    1 MB

    Failed

Installation

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

npx untitledui add file-upload

File upload examples

Below are examples and variations of this file upload component:

Progress bar

Get the code

chatgpt-clone.ts

commercial.mp4

invoice.pdf

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

  • Example dashboard screenshot.jpg

    720 KB

    Uploading...

    50%

  • Tech design requirements_2.pdf

    720 KB

    Complete

    100%

  • Tech design requirements.pdf

    1 MB

    Failed

Progress fill

Get the code

chatgpt-clone.ts

commercial.mp4

invoice.pdf

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

  • Example dashboard screenshot.jpg

    720 KB

    50%

  • Tech design requirements_2.pdf

    720 KB

    100%

  • Tech design requirements.pdf

    Upload failed, please try again

Disabled

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

Accept image only

Get the code

Screenshot.png

IMG_0050.jpeg

invoice.pdf

or drag and drop

Please upload PNG or JPEG images only.

    Max size limit

    Get the code

    smaller_file.jpg

    too_large.mp4

    still_too_large.pdf

    or drag and drop

    Upload files to add to this project (max. 1 MB).

      CalendarsContent dividers