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

Get started with the <FileInput> 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.

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