feat(react): new component FileUpload

[oddvernes]

resolves #1236

[changeset-bot]

🦋 Changeset detected

Latest commit: a833b4a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-react	Minor
@digdir/designsystemet-css	Minor
@digdir/designsystemet	Minor
@digdir/designsystemet-types	Minor
@digdir/designsystemet-web	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Preview deployments for this pull request:

storybook - 7. Jul 2026 - 08:26

www - 7. Jul 2026 - 08:28

[oddvernes]

One issue I have encountered: because all the components are in one common @layer, placing FileUpload inside a Field causes .ds-field to overwrite styles on .ds-file-upload (being a label) due to usage of stronger selectors (:is()). For now I have solved this by repeating the class twice .ds-file-upload.ds-file-upload {} to get same specificity (0.2.0) and then it wins by being later in the css order.

[Febakke]

Tested with VoiceOver.

Label in field gives weird behavior. Image is showing reading order of elements.

Image from screen reader:

Text inside works fine:

We need to discuss:

• Should we support label outside of dropzone? If so, how do we create a robust screen reader experience?
• We need to think about the "slipp filer her" text. This is something we might want to hide from screen readers. How do we support this and flexible texts 🤔

[mimarz]

Note to self: Me and @eirikbacker want to try and see if we can reduce the number of sub-components to promote composition of existing components.

Not only that, but I can bet you people will use <Input> inside <Fileupload> (instead of <Fileupload.Input>), and we should see if we can make that work.

[mimarz]

Note to self: Me and @eirikbacker want to try and see if we can reduce the number of sub-components to promote composition of existing components.

Not only that, but I can bet you people will use <Input> inside <Fileupload> (instead of <Fileupload.Input>), and we should see if we can make that work.

New suggestion for how to use Fileupload (without .Description, .FakeButton, .Input):

      <Field>
        <Label>Upload file</Label>
        <FileUpload>       
          <Field.Description>Drop file here</Field.Description>
          <Field.Description>
            File must be in csv format and less than 2MB
          </Field.Description>
          <Button variant="secondary" asChild>
            <span>Upload file</Button>
          </Label>
          <Input type='file' />
        </FileUpload>
      </Field>

vs current with sub-components:

      <Field>
        <Label>Upload file</Label>
        <FileUpload>
          <FileUpload.Description>Drop file here</FileUpload.Description>
          <FileUpload.Description>
            File must be in csv format and less than 2MB
          </FileUpload.Description>
          <FileUpload.FakeButton>Upload file</FileUpload.FakeButton>
          <FileUpload.Input />
        </FileUpload>
      </Field>

[eirikbacker]

☁️ ⬆️ 🌟

[mimarz]

Me and @eirikbacker did some changes to reduce sub-components and added react-dropzone examples.

@Barsnes will do a last buddycheck tomorrow.