React File Input - Flowbite

Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes

The <FileInput> component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the <FileInput> component.

To start using the component make sure that you have imported it from Flowbite React:

'use client';

import { FileInput } from 'flowbite-react';

Table of Contents#

File upload example#

Get started with a simple <FileInput> component to let users upload one single file.

Edit on GitHub
  • React TypeScript
'use client';

import { FileInput, Label } from 'flowbite-react';

export default function FileUpload() {
  return (
    <div>
      <div className="mb-2 block">
        <Label
          htmlFor="file-upload"
          value="Upload file"
        />
      </div>
      <FileInput id="file-upload" />
    </div>
  )
}

Helper text#

Add a descriptive helper text to inform users the allowed extensions and sizes of the files.

Edit on GitHub

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

  • React TypeScript
'use client';

import { FileInput, Label } from 'flowbite-react';

export default function FileUploadWithHelperText() {
  return (
    <div>
      <div>
        <Label
          htmlFor="file-upload-helper-text"
          value="Upload file"
        />
      </div>
      <FileInput
        helperText="SVG, PNG, JPG or GIF (MAX. 800x400px)."
        id="file-upload-helper-text"
      />
    </div>
  )
}

Multiple files#

Apply the multiple attribute to the <FileInput> component to allow more files to be uploaded.

Edit on GitHub
  • React TypeScript
'use client';

import { FileInput, Label } from 'flowbite-react';

export default function MultipleFileUpload() {
  return (
    <div>
      <div>
        <Label
          htmlFor="multiple-file-upload"
          value="Upload multiple files"
        />
      </div>
      <FileInput
        id="multiple-file-upload"
        multiple
      />
    </div>
  )
}

Sizes#

Choose from the small, default, and large <FileInput> sizing options.

Edit on GitHub
  • React TypeScript
'use client';

import { FileInput, Label } from 'flowbite-react';

export default function SizesFileUpload() {
  return (
    <>
      <div className="mb-2">
        <div>
          <Label
            htmlFor="small-file-upload"
            value="Small file input"
          />
        </div>
        <FileInput
          id="small-file-upload"
          sizing="sm"
        />
      </div>
      <div className="mb-2">
        <div>
          <Label
            htmlFor="default-file-upload"
            value="Default size file input"
          />
        </div>
        <FileInput id="default-file-upload" />
      </div>
      <div>
        <div>
          <Label
            htmlFor="large-file-upload"
            value="Large file input"
          />
        </div>
        <FileInput
          id="large-file-upload"
          sizing="lg"
        />
      </div>
    </>
  )
}

Dropzone#

The dropzone <FileInput> component can be used to upload one or more files by clicking anywhere in the area.

Edit on GitHub
  • React TypeScript
'use client';

import { FileInput, Label } from 'flowbite-react';

export default function MultipleFileUpload() {
  return (
    <div className="flex w-full items-center justify-center">
      <Label
        className="dark:hover:bg-bray-800 flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
        htmlFor="dropzone-file"
      >
        <div className="flex flex-col items-center justify-center pb-6 pt-5">
          <SeeSourceCodeForSVG />
          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
            <p>
              <span className="font-semibold">
                Click to upload
              </span>
              or drag and drop
            </p>
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400">
            SVG, PNG, JPG or GIF (MAX. 800x400px)
          </p>
        </div>
        <FileInput
          className="hidden"
          id="dropzone-file"
        />
      </Label>
    </div>
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "flex"
  },
  "field": {
    "base": "relative w-full",
    "input": {
      "base": "rounded-lg overflow-hidden block w-full border disabled:cursor-not-allowed disabled:opacity-50",
      "sizes": {
        "sm": "sm:text-xs",
        "md": "text-sm",
        "lg": "sm:text-md"
      },
      "colors": {
        "gray": "bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
        "info": "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
        "failure": "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
        "warning": "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
        "success": "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500"
      }
    }
  }
}

References#