FileInput

Capture files from user

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

Your resume

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

import { FileInput } from '@asuikit/core';

function Demo() {
  return (
    <FileInput
      placeholder="Pick file"
      label="Your resume"
      withAsterisk
    />
  );
}

Controlled

When multiple is false:

import { useState } from 'react';
import { FileInput } from '@asuikit/core';

function Demo() {
  const [value, setValue] = useState<File | null>(null);
  return <FileInput value={value} onChange={setValue} />;
}

When multiple is true:

import { useState } from 'react';
import { FileInput } from '@asuikit/core';

function Demo() {
  const [value, setValue] = useState<File[]>([]);
  return <FileInput multiple value={value} onChange={setValue} />;
}

Multiple

Set multiple to allow user to pick more than one file:

Upload files

import { FileInput } from '@asuikit/core';

function Demo() {
  return <FileInput label="Upload files" placeholder="Upload files" multiple />;
}

Disabled state

Disabled

import { FileInput } from '@asuikit/core';

function Demo() {
  return <FileInput disabled />;

Accept

Set accept prop to restrict files selection to specific mime types:

Upload files

import { FileInput } from '@asuikit/core';

function Demo() {
  return <FileInput label="Upload files" placeholder="Upload files" accept="image/png,image/jpeg" />;
}

Custom value component

Multiple

Single

import { FileInput, FileInputProps, Group, Center, rem } from '@asuikit/core';
import { IconPhoto } from '@tabler/icons-react';

function Value({ file }: { file: File }) {
  return (
    <Center
      inline
      sx={(theme) => ({
        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[1],
        fontSize: theme.fontSizes.xs,
        padding: `${rem(3)} ${rem(7)}`,
        borderRadius: theme.radius.sm,
      })}
    >
      <IconPhoto size={rem(14)} style={{ marginRight: rem(5) }} />
      <span
        style={{
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          overflow: 'hidden',
          maxWidth: rem(200),
          display: 'inline-block',
        }}
      >
        {file.name}
      </span>
    </Center>
  );
}

const ValueComponent: FileInputProps['valueComponent'] = ({ value }) => {
  if (Array.isArray(value)) {
    return (
      <Group spacing="sm" py="xs">
        {value.map((file, index) => (
          <Value file={file} key={index} />
        ))}
      </Group>
    );
  }

  return <Value file={value} />;
};

function Demo() {
  return (
    <Box maw={320} mx="auto">
      <FileInput label="Multiple" placeholder="Multiple" multiple valueComponent={ValueComponent} />
      <FileInput mt="md" label="Single" placeholder="Single" valueComponent={ValueComponent} />
    </Box>
  );
}

With icon

Your resume

import { FileInput, rem } from '@asuikit/core';
import { IconUpload } from '@tabler/icons-react';

function Demo() {
  return <FileInput label="Your resume" placeholder="Your resume" icon={<IconUpload size={rem(14)} />} />;
}

Get input ref

import { useRef } from 'react';
import { FileInput } from '@asuikit/core';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <FileInput ref={ref} />;
}

Accessibility

Provide aria-label in case you use component without label or placeholder for screen reader support:

<FileInput /> // -> not ok, button is not labeled
<FileInput label="My input" /> // -> ok, button and label is connected
<FileInput placeholder="My input" /> // -> ok, button has label
<FileInput aria-label="My input" /> // -> ok, button is not visible but will be announced by screen reader

Go back

ColorPicker – @asuikit/core

Up next

Input – @asuikit/core

FileInput component props

Name	Type	Description
accept	string	File input accept attribute, for example, "image/png,image/jpeg"
capture	boolean \| "user" \| "environment"	Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.
clearButtonProps	Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">	Props added to clear button
clearable	boolean	Allow to clear value
defaultValue	File	Uncontrolled input default value
description	ReactNode	Input description, displayed after label
descriptionProps	Record<string, any>	Props spread to description element
disabled	boolean	Disabled input state
error	ReactNode	Displays error message after input
errorProps	Record<string, any>	Props spread to error element
fileInputProps	Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">	Spreads props to input element used to capture files
form	string	Input form attribute
icon	ReactNode	Adds icon on the left side of input
iconWidth	Width<string \| number>	Width of icon section
inputContainer	(children: ReactNode) => ReactNode	Input container component, defaults to React.Fragment
inputWrapperOrder	("input" \| "label" \| "error" \| "description")[]	Controls order of the Input.Wrapper elements
label	ReactNode	Input label, displayed before input
labelProps	Record<string, any>	Props spread to label element
multiple	false	Determines whether user can pick more than one file
name	string	Input name attribute
onChange	(payload: File) => void	Called when user picks files
placeholder	string
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
readOnly	boolean	Determines whether the user can change value
required	boolean	Sets required on input element
rightSection	ReactNode	Right section of input, similar to icon but on the right
rightSectionProps	Record<string, any>	Props spread to rightSection div element
rightSectionWidth	Width<string \| number>	Width of right section, is used to calculate input padding-right
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Input size
value	File	Controlled input value
valueComponent	FC<{ value: File \| File[]; }>	Current value renderer
variant	Variants<"unstyled" \| "default" \| "filled">	Defines input appearance, defaults to default in light color scheme and filled in dark
withAsterisk	boolean	Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps	Record<string, any>	Props passed to root element (InputWrapper component)

FileInput component Styles API

Name	Static selector	Description
wrapper	.asuikit-FileInput-wrapper	Root Input element
icon	.asuikit-FileInput-icon	Input icon wrapper on the left side of the input, controlled by icon prop
input	.asuikit-FileInput-input	Main input element
rightSection	.asuikit-FileInput-rightSection	Input right section, controlled by rightSection prop
root	.asuikit-FileInput-root	Root element
label	.asuikit-FileInput-label	Label element styles, defined by label prop
error	.asuikit-FileInput-error	Error element styles, defined by error prop
description	.asuikit-FileInput-description	Description element styles, defined by description prop
required	.asuikit-FileInput-required	Required asterisk element styles, defined by required prop
placeholder	.asuikit-FileInput-placeholder	Placeholder text

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter