Skip to content

feat(file-input): introduce multiple file uploads - #8032

Draft
tomwyatt wants to merge 1 commit into
masterfrom
file-input-multi-upload
Draft

feat(file-input): introduce multiple file uploads#8032
tomwyatt wants to merge 1 commit into
masterfrom
file-input-multi-upload

Conversation

@tomwyatt

Copy link
Copy Markdown

Proposed behaviour

This PR enhances the existing FileInput component to support multiple file uploads. Multiple file upload functionality can be activated via the optional multiple boolean prop, which is defaulted to false.

When multiple is enabled, each uploaded file is represented by its own FileUploadStatusProps object, allowing consumers to independently track progress, success, error, and removal states for each file.

Current behaviour

Prior to this PR, the FileInput component only supported single file upload. Once a file had been successfully uploaded, the file input section would be replaced with a status section which would display the file name, status and a way to remove the file. Removing the file would display the file input section again in place.

This functionality still exists for the FileInput component, but the new prop multiple allows more than one file to be uploaded. A list of file status components for each uploaded file appears below the file input section, which remains visible for further file uploads if necessary.

Screenshot 2026-06-18 at 13 37 39

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

@tomwyatt tomwyatt self-assigned this Jun 18, 2026
@edleeks87 edleeks87 added DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review labels Jun 18, 2026
@tomwyatt
tomwyatt force-pushed the file-input-multi-upload branch 4 times, most recently from 32bb486 to b4acb0e Compare June 19, 2026 08:00
@tomwyatt
tomwyatt force-pushed the file-input-multi-upload branch from b4acb0e to a2eba70 Compare June 19, 2026 08:03
@damienrobson-sage

Copy link
Copy Markdown
Contributor

All looks good from an accessibility perspective ✅

@edleeks87

Copy link
Copy Markdown
Contributor

@ljemmo @harpalsingh would one of you be able to give a steer on how long lists of files should be displayed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review

Development

Successfully merging this pull request may close these issues.

3 participants