React Mantine File Input Example

In this tutorial, we will see how to use File Input component in react mantine. We will create File Input with Error message, fileInput sizes, multiple File Upload Input using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

React Mantine UI File Input Example

1. react mantine simple File Input component.

import { FileInput } from "@mantine/core";

export default function App() {
  return (
    <>
      <FileInput placeholder="Pick file" label="Upload File" withAsterisk />
    </>
  );
}

react mantine upload file input component

2. react mantine file input variant with ,Deafult, filled, unstyled.

import { FileInput, Stack } from "@mantine/core";

export default function App() {
  return (
    <>
      <Stack spacing="sm">
        <FileInput placeholder="Pick file" label="Upload File" withAsterisk />
        <FileInput
          placeholder="Pick file"
          label="Upload File"
          variant="filled"
        />
        <FileInput
          placeholder="Pick file"
          label="Upload File"
          variant="unstyled"
        />
      </Stack>
    </>
  );
}

mantine file input variant

3. react mantine file input sizes with xs, sm, md, lg, xl.

import { FileInput, Stack } from "@mantine/core";

export default function App() {
  return (
    <>
      <Stack spacing="sm">
        <FileInput
          placeholder="Pick file"
          label="Upload File"
          size="xs"
          withAsterisk
        />
        <FileInput
          placeholder="Pick file"
          label="Upload File"
          size="sm"
          withAsterisk
        />
        <FileInput
          placeholder="Pick file"
          label="Upload File"
          size="md"
          withAsterisk
        />
        <FileInput
          placeholder="Pick file"
          label="Upload File"
          size="lg"
          withAsterisk
        />
        <FileInput
          placeholder="Pick file"
          label="Upload File"
          size="xl"
          withAsterisk
        />
      </Stack>
    </>
  );
}

react mantine file input sizes

4. react mantine file input with error message.

import { FileInput } from "@mantine/core";

export default function App() {
  return (
    <>
      <FileInput
        placeholder="Pick file"
        label="Upload File"
        error="File Size Must Be 2MB"
        withAsterisk
      />
    </>
  );
}

react mantine file input with error message

5. react mantine file input set accept prop to restrict files selection to specific mime types.

import { FileInput } from "@mantine/core";

export default function App() {
  return (
    <>
      <FileInput
        placeholder="Pick file"
        label="Upload File"
        withAsterisk
        accept="image/png,image/jpeg"
      />
    </>
  );
}

Using icon you need to install @tabler/icons.

Run below command to install @tabler/icons.

npm install @tabler/icons-react

6. react mantine file input with multiple upload.

import { Container, FileInput, Stack } from "@mantine/core";
import { FileInputProps, Group, Center } from "@mantine/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: "3px 7px",
        borderRadius: theme.radius.sm,
      })}
    >
      <IconPhoto size={14} style={{ marginRight: 5 }} />
      <span
        style={{
          whiteSpace: "nowrap",
          textOverflow: "ellipsis",
          overflow: "hidden",
          maxWidth: 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} />;
};

export default function App() {
  return (
    <>
      <Container size="xs" mt={120}>
        <Stack spacing="sm">
          <FileInput
            label="Multiple"
            placeholder="Multiple"
            multiple
            valueComponent={ValueComponent}
          />
        </Stack>
      </Container>
    </>
  );
}

react mantine file input with multiple upload

7. react mantine file input with icons.

import { FileInput } from "@mantine/core";
import { IconUpload } from "@tabler/icons-react";

export default function App() {
  return (
    <>
      <FileInput
        label="Upload Image"
        placeholder="Upload File"
        icon={<IconUpload size={14} />}
      />
    </>
  );
}

mantine file input with icons