React FileInput - 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>
  )
}