## Usage

The `<FileInput />` is used to select one or more files to upload to a specific location.

Below is an example of a file input for context.

```tsx live
const [files, setFiles] = useState<InputFile[]>([
  {
    name: 'filename.png',
    id: 'e850cadd-ed1b-4804-8585-78e10c589ee1',
    size: 5800000,
    status: FileStatus.UPLOADING,
    file: new File([], ''),
  },
  {
    name: 'Longfilenamehere.png',
    id: '6af8732c-7822-4fc2-a882-46ae4d283c0d',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
  {
    name: 'filenamegoeshere.png',
    id: '3f3c1fb5-6b44-49c4-85b2-dd6712574de5',
    size: 580000,
    status: FileStatus.FAILED,
    error: 'Error goes here',
    file: new File([], ''),
  },
]);

return (
  <FileInput
    maxFileCount={10}
    maxFileSize={10000000}
    acceptedFileTypes={['image/jpeg', 'image/png', 'image/bmp']}
    value={files}
    onChange={setFiles}
    onDrop={async (newFiles: InputFile[]) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`sent ${newFiles.length} files to server`);

      return newFiles.map(
        (file) =>
          ({
            ...file,
            url: 'new-remote-url',
            status: FileStatus.UPLOADED,
          }) as InputFile
      );
    }}
    onDelete={async (file: InputFile) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`file deleted from server`);
    }}
  />
);
```

## maxFileCount

User can upload a single file or multiple files based on the `maxFileCount` prop.

### Single file upload

Provides the ability to limit the file upload to one item only. When a file has been selected, the file target is disabled.
The user will need to delete the uploaded file before they can upload a new file.

```tsx live
const [files, setFiles] = useState<InputFile[]>([
  {
    name: 'filenamegoeshere.png',
    id: '3f3c1fb5-6b44-49c4-85b2-dd6712574de5',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
]);

return (
  <FileInput
    maxFileCount={1}
    value={files}
    onChange={setFiles}
    onDrop={async (newFiles: InputFile[]) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`sent ${newFiles.length} files to server`);

      return newFiles.map(
        (file) =>
          ({
            ...file,
            url: 'new-remote-url',
            status: FileStatus.UPLOADED,
          }) as InputFile
      );
    }}
    onDelete={async (file: InputFile) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`file deleted from server`);
    }}
  />
);
```

### Multiple file upload

Provides the ability to upload multiple files. For each new file the user uploads,
a new cell is added to the top of the list. If an attempt is made to select more files
than allowed, a critical toast will pop up to notify the user.

```tsx live
const [files, setFiles] = useState<InputFile[]>([
  {
    name: 'filename.png',
    id: '1f3c1fb5-6b44-49c4-85b2-dd6712574de5',
    size: 580000,
    status: FileStatus.UPLOADING,
    file: new File([], ''),
  },
  {
    name: 'Longfilenamehere.png',
    id: '2f3c1fb5-6b44-49c4-85b2-dd6712574de5',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
  {
    name: 'filenamegoeshere.png',
    id: '3f3c1fb5-6b44-49c4-85b2-dd6712574de5',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
]);

return (
  <FileInput
    maxFileCount={5}
    value={files}
    onChange={setFiles}
    onDrop={async (newFiles: InputFile[]) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`sent ${newFiles.length} files to server`);

      return newFiles.map(
        (file) =>
          ({
            ...file,
            url: 'new-remote-url',
            status: FileStatus.UPLOADED,
          }) as InputFile
      );
    }}
    onDelete={async (file: InputFile) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`file deleted from server`);
    }}
  />
);
```

## Automatic helper text

File limitations should be communicated to the user up front, to help avoid errors like uploading an
incompatible file type or one that’s too large.

The file input will automatically generate a helper text to clearly communicate the limitations to the user,
based on the values passed to the `maxFileCount`, `maxFileSize` and `acceptedFileTypes` props.

```tsx live
const [files, setFiles] = useState<InputFile[]>([]);
const [maxFileCount, setMaxFileCount] = useState('default');
const [maxFileSize, setMaxFileSize] = useState('default');
const [acceptedFileTypes, setAcceptedFileTypes] = useState(['image/jpeg']);

return (
  <Flex flexDirection="column" gap="large">
    <FileInput
      maxFileCount={maxFileCount !== 'default' ? Number(maxFileCount) : undefined}
      maxFileSize={maxFileSize !== 'default' ? Number(maxFileSize) : undefined}
      acceptedFileTypes={acceptedFileTypes}
      value={files}
      onChange={setFiles}
      onDrop={async (newFiles: InputFile[]) => {
        await new Promise((resolve) => setTimeout(resolve, 3000));
        console.log(`sent ${newFiles.length} files to server`);

        return newFiles.map(
          (file) =>
            ({
              ...file,
              url: 'new-remote-url',
              status: FileStatus.UPLOADED,
            }) as InputFile
        );
      }}
      onDelete={async (file: InputFile) => {
        await new Promise((resolve) => setTimeout(resolve, 3000));
        console.log(`file deleted from server`);
      }}
    />

    <Flex justifyContent="space-between" padding="xsmall">
      <Fieldset legend="Max file count" legendStyle="group">
        <RadioGroup size="small" value={maxFileCount} onInputChange={setMaxFileCount}>
          <Radio value="default">Default</Radio>
          <Radio value="1">1</Radio>
          <Radio value="10">10</Radio>
        </RadioGroup>
      </Fieldset>

      <Fieldset legend="Max file size" legendStyle="group">
        <RadioGroup size="small" value={maxFileSize} onInputChange={setMaxFileSize}>
          <Radio value="default">Default</Radio>
          <Radio value="300000">300 KB</Radio>
          <Radio value="10000000">10 MB</Radio>
        </RadioGroup>
      </Fieldset>

      <Fieldset legend="Accepted file types" legendStyle="group">
        <CheckboxGroup size="small" value={acceptedFileTypes} onInputChange={setAcceptedFileTypes}>
          <Checkbox value="image/jpeg">JPEG</Checkbox>
          <Checkbox value="image/png">PNG</Checkbox>
          <Checkbox value="image/bmp">BMP</Checkbox>
          <Checkbox value="application/pdf">PDF</Checkbox>
          <Checkbox value="audio/mp4">MP4</Checkbox>
        </CheckboxGroup>
      </Fieldset>
    </Flex>
  </Flex>
);
```

## Errored uploads

The `<FileInput />` component allows users to define a file upload handler
through the `onFilesUpload` handler. This handler should return an array of
either `FailedFile` or `UploadedFile` objects. If the handler itself throws
an error, all uploading items will fail and inherit that error.

In the following example the first item in the array of the files to be
uploaded will always become a failed item. There is also a 50% chance that the entire upload will fail.

```tsx live
const [files, setFiles] = useState<InputFile[]>([
  {
    name: 'filenamegoeshere.png',
    id: '3f3c1fb5-6b44-49c4-85b2-dd6712574de5',
    status: FileStatus.FAILED,
    size: 580000,
    error: 'Error goes here',
    file: new File([], ''),
  },
]);

return (
  <FileInput
    maxFileCount={10}
    value={files}
    onChange={setFiles}
    onDrop={async (newFiles: InputFile[]) => {
      const randomNumber = Math.random(); // Generate a random number between 0 and 1

      if (randomNumber < 0.5) {
        await new Promise((resolve) => setTimeout(resolve, 3000));
        console.log(`sent ${newFiles.length} files to server`);
      } else {
        throw new Error('Something went wrong');
      }

      /**
       * Simulate a situation where a partial fail occurs
       */
      return newFiles.map(
        (file, index) =>
          ({
            ...file,
            ...(index === 0
              ? {
                  status: FileStatus.FAILED,
                  error: 'The server does not like the first item',
                }
              : {
                  status: FileStatus.UPLOADED,
                }),
          }) as InputFile
      );
    }}
    onDelete={async (file: InputFile) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`file deleted from server`);
    }}
  />
);
```

## Errored deletions

The `<FileInput />` component allows users to define a file delete handler
through the `onFileDelete` handler. Note, that this is a singular file as
opposed to the multi nature of the `onFilesUpload` handler.

This handler takes in a file object and should delete it from the server.
If the handler itself throws an error, the item in deletion will fail
and inherit that error.

In the following example each item has a 50% chance of failing to be deleted.

```tsx live
const [files, setFiles] = useState<InputFile[]>([
  {
    name: 'filename.png',
    id: 'filename.png',
    size: 580000,
    status: FileStatus.UPLOADING,
    file: new File([], ''),
  },
  {
    name: 'Longfilenamehere.png',
    id: 'Longfilenamehere.png',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
  {
    name: 'filenamegoeshere.png',
    id: 'filenamegoeshere.png',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
]);

return (
  <FileInput
    maxFileCount={10}
    value={files}
    onChange={setFiles}
    onDrop={async (newFiles: InputFile[]) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`sent ${newFiles.length} files to server`);

      return newFiles.map(
        (file) =>
          ({
            ...file,
            url: 'new-remote-url',
            status: FileStatus.UPLOADED,
          }) as InputFile
      );
    }}
    onDelete={async (file: InputFile) => {
      const randomNumber = Math.random(); // Generate a random number between 0 and 1

      if (randomNumber < 0.5) {
        await new Promise((resolve) => setTimeout(resolve, 1500));
        throw new Error('Oops! An error occurred.');
      } else {
        await new Promise((resolve) => setTimeout(resolve, 3000));
        console.log(`file deleted from server`);
      }
    }}
  />
);
```

## Disabled

It can be used when you want user to access the component
as view only but can’t interact with the component.

```tsx live
const [files, setFiles] = useState<InputFile[]>([
  {
    name: 'filename.png',
    id: 'filename.png',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
  {
    name: 'Longfilenamehere.png',
    id: 'Longfilenamehere.png',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
  {
    name: 'filenamegoeshere.png',
    id: 'filenamegoeshere.png',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
]);

return (
  <FileInput
    maxFileCount={5}
    disabled={true}
    value={files}
    onChange={setFiles}
    onDrop={async (newFiles: InputFile[]) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`sent ${newFiles.length} files to server`);

      return newFiles.map(
        (file) =>
          ({
            ...file,
            url: 'new-remote-url',
            status: FileStatus.UPLOADED,
          }) as InputFile
      );
    }}
    onDelete={async (file: InputFile) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`file deleted from server`);
    }}
  />
);
```

## Invalid state

The `<FileInput />` component can receive an `isInvalid` flag from the [Field](/packages/field/) component when the value of the input fails validation as part of a form. This can happen in cases like when the field is required but no files have been uploaded.

See an interactive code example of using the FileInput with react-hook-form and yup validation in the [Forms pattern](/patterns/forms/examples/#validation-with-yup).

```tsx live
const [files, setFiles] = useState<InputFile[]>([]);

return (
  <Field required invalid label="Purchase receipts" message="This field is required">
    <FileInput
      invalid
      disabled={false}
      maxFileCount={10}
      acceptedFileTypes={['image/jpeg', 'image/png', 'image/bmp']}
      value={files}
      onChange={setFiles}
      onDrop={async (newFiles: InputFile[]) => {
        await new Promise((resolve) => setTimeout(resolve, 3000));
        console.log(`sent ${newFiles.length} files to server`);

        return newFiles.map(
          (file) =>
            ({
              ...file,
              url: 'new-remote-url',
              status: FileStatus.UPLOADED,
            }) as InputFile
        );
      }}
      onDelete={async (file: InputFile) => {
        await new Promise((resolve) => setTimeout(resolve, 3000));
        console.log(`file deleted from server`);
      }}
    />
  </Field>
);
```

## Overflowing file names

Max width for the filename is 25 chars, if the filename length exceed the limit than truncate
the name in the middle so that the extension is always visible. Tooltip can be used to reveal
the full filename on hover.

```tsx live
const [files, setFiles] = useState<InputFile[]>([
  {
    name: 'filenamegoesherebutitsreallyreallylonglikereallyreallylong.png',
    id: 'filenamegoesherebutitsreallyreallylonglikereallyreallylong.png',
    size: 580000,
    status: FileStatus.UPLOADED,
    url: 'file-url',
    file: new File([], ''),
  },
]);

return (
  <FileInput
    maxFileCount={1}
    value={files}
    onChange={setFiles}
    onDrop={async (newFiles: InputFile[]) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`sent ${newFiles.length} files to server`);

      return newFiles.map(
        (file) =>
          ({
            ...file,
            url: 'new-remote-url',
            status: FileStatus.UPLOADED,
          }) as InputFile
      );
    }}
    onDelete={async (file: InputFile) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));
      console.log(`file deleted from server`);
    }}
  />
);
```

An input to select one or more files to upload.

FileInput

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources