File upload components

FREE

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.

File upload example

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@latest add file-upload-base

File upload examples

Below are examples and variations of this file upload component:

Progress bar

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

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

or drag and drop

Please upload PNG or JPEG images only.

    Max size limit

    or drag and drop

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

      API reference

      Import the parts and assemble them:

      import { FileUpload } from "@/components/application/file-upload/file-upload-base";
 
<FileUpload.Root>
    <FileUpload.DropZone />
 
    <FileUpload.List>
        <FileUpload.ListItemProgressBar />
    </FileUpload.List>
</FileUpload.Root>

      Draggable

      Import Draggable from @/components/application/file-upload/draggable. Renders a <div> element.

      Draggable props
      PropTypeDefaultDescription
      name* (required)string—The file name shown under the icon and used for the simulated File that is dropped.
      type* (required)string—The MIME type of the simulated file. Also used as the file icon type when fileIconType is not set.
      size* (required)number—The size of the simulated file in bytes. That many random bytes are generated on drop.
      fileIconTypeFileType—Overrides which file icon is shown, when it should differ from the MIME type.
      theme
      "default""gray""solid"
      		—The visual variant of the file icon.

      FileUpload.DropZone

      Renders a <div> element.

      FileUpload.DropZone props
      PropTypeDefaultDescription
      classNamestring—The class name of the drop zone.
      hintstring—A hint text explaining what files can be dropped.
      isDisabledboolean—Disables dropping or uploading files.
      acceptstring—Specifies the types of files that the server accepts. Examples: "image/*", ".pdf,image/*", "image/*,video/mpeg,application/pdf".
      allowsMultiplebooleantrueAllows multiple file uploads.
      maxSizenumber—Maximum file size in bytes.
      onDropFiles((files: FileList) => void)—Callback function that is called with the list of dropped files when files are dropped on the drop zone.
      onDropUnacceptedFiles((files: FileList) => void)—Callback function that is called with the list of unaccepted files when files are dropped on the drop zone.
      onSizeLimitExceed((files: FileList) => void)—Callback function that is called with the list of files that exceed the size limit when files are dropped on the drop zone.

      FileUpload.List

      Renders a <ul> element.

      Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

      FileUpload.ListItemProgressBar

      Renders FileIcon.

      FileUpload.ListItemProgressBar props
      PropTypeDefaultDescription
      name* (required)string—The name of the file.
      size* (required)number—The size of the file.
      progress* (required)number—The upload progress of the file.
      failedboolean—Whether the file failed to upload.
      typeFileType—The type of the file.
      classNamestring"size-10 shrink-0 dark:hidden"The class name of the file list item.
      fileIconVariant
      "default""gray""solid"
      		—The variant of the file icon.
      onDelete(() => void)—The function to call when the file is deleted.
      onRetry(() => void)—The function to call when the file upload is retried.

      FileUpload.ListItemProgressFill

      Renders a <div> element.

      FileUpload.ListItemProgressFill props
      PropTypeDefaultDescription
      name* (required)string—The name of the file.
      size* (required)number—The size of the file.
      progress* (required)number—The upload progress of the file.
      failedboolean—Whether the file failed to upload.
      typeFileType—The type of the file.
      classNamestring—The class name of the file list item.
      fileIconVariant
      "default""gray""solid"
      		—The variant of the file icon.
      onDelete(() => void)—The function to call when the file is deleted.
      onRetry(() => void)—The function to call when the file upload is retried.

      FileUpload.Root

      Renders a <div> element.

      Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

      FAQs

      Please refer to our frequently asked questions page for more.

      Pass the accept prop to FileUpload.DropZone. It takes the same comma-separated string as a native file input, for example "image/*", ".pdf,image/*" or "image/*,video/mpeg,application/pdf", and is checked for both dropped and picked files. Files that don't match go to onDropUnacceptedFiles instead of onDropFiles. Size is checked first, so a file that is both too big and the wrong type goes to onSizeLimitExceed.

      Set maxSize on FileUpload.DropZone to the limit in bytes, for example maxSize={1024 * 1024 * 10} for 10 MB. Oversized files never reach onDropFiles; they go to onSizeLimitExceed. The hint text only switches to the error color when you pass that callback, and without it oversized files are dropped silently.

      Yes. FileUpload.DropZone handles the native drag events itself and shows a brand-colored ring while a file is dragged over it. The "Click to upload" button opens the standard file picker for the same drop zone, and both paths run through the same type and size validation before calling onDropFiles with a FileList.

      The list is fully controlled: keep the files in your own state and pass name, size (in bytes) and a progress number from 0 to 100 to each FileUpload.ListItemProgressBar or FileUpload.ListItemProgressFill. Update progress as your upload reports it. At 100, the progress bar item shows a "Complete" label and the fill item shows a check icon.

      Set failed to true on the list item. Both list items then show an error ring and a "Try again" button that calls onRetry; ListItemProgressBar adds a "Failed" label and ListItemProgressFill shows "Upload failed, please try again". The delete button calls onDelete in every state.

      Yes, set allowsMultiple={false} on FileUpload.DropZone. It defaults to true, and when disabled only the first file from a drop or selection is processed.

      Use the hint prop, which replaces the default "SVG, PNG, JPG or GIF (max. 800x400px)" text — useful for describing your own accept and maxSize rules. To turn the whole drop zone off, pass isDisabled, which blocks drops, disables the file input, and dims the icon.

      Empty statesFilter bars