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:

import { FileInput } from "flowbite-react";

File upload example#

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

Edit on GitHub
import { FileInput, Label } from "flowbite-react"; export function Component() { return ( <> <Label className="mb-2 block" htmlFor="file-upload"> Upload file </Label> <FileInput id="file-upload" /> </> ); }

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

import { FileInput, HelperText, Label } from "flowbite-react"; export function Component() { return ( <> <Label className="mb-2 block" htmlFor="file-upload-helper-text"> Upload file </Label> <FileInput id="file-upload-helper-text" /> <HelperText className="mt-1">SVG, PNG, JPG or GIF (MAX. 800x400px).</HelperText> </> ); }

Multiple files#

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

Edit on GitHub
import { FileInput, Label } from "flowbite-react"; export function Component() { return ( <> <Label className="mb-2 block" htmlFor="multiple-file-upload"> Upload multiple files </Label> <FileInput id="multiple-file-upload" multiple /> </> ); }

Sizes#

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

Edit on GitHub
import { FileInput, Label } from "flowbite-react"; export function Component() { return ( <div className="space-y-5"> <div> <Label className="mb-2 block" htmlFor="small-file-upload"> Small file input </Label> <FileInput id="small-file-upload" sizing="sm" /> </div> <div> <Label className="mb-2 block" htmlFor="default-file-upload"> Default size file input </Label> <FileInput id="default-file-upload" /> </div> <div> <Label className="mb-2 block" htmlFor="large-file-upload"> Large file input </Label> <FileInput id="large-file-upload" sizing="lg" /> </div> </div> ); }

Dropzone#

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

Edit on GitHub
import { FileInput, Label } from "flowbite-react"; export function Component() { return ( <div className="flex w-full items-center justify-center"> <Label htmlFor="dropzone-file" className="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" > <div className="flex flex-col items-center justify-center pb-6 pt-5"> <svg className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16" > <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" /> </svg> <p className="mb-2 text-sm text-gray-500 dark:text-gray-400"> <span className="font-semibold">Click to upload</span> or drag and drop </p> <p className="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p> </div> <FileInput id="dropzone-file" className="hidden" /> </Label> </div> ); }

Theme#

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

{ "base": "block w-full cursor-pointer rounded-lg border file:-ms-4 file:me-4 file:cursor-pointer file:border-none file:bg-gray-800 file:py-2.5 file:pe-4 file:ps-8 file:text-sm file:font-medium file:leading-[inherit] file:text-white hover:file:bg-gray-700 focus:outline-none focus:ring-1 dark:file:bg-gray-600 dark:hover:file:bg-gray-500", "sizes": { "sm": "text-xs", "md": "text-sm", "lg": "text-lg" }, "colors": { "gray": "border-gray-300 bg-gray-50 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-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#