@sikt/sds-input-file

@sikt/sds-input-file

Consume

npm i -s @sikt/sds-{form,input-file}

React

import { InputFile, FileList, FileListItem } from "@sikt/sds-input-file";
import "@sikt/sds-form/dist/index.css";
import "@sikt/sds-input-file/dist/index.css";

<InputFile
  label="Upload documentation"
  aria-label="Upload documentation"
  accept=".doc,.docx"
  onChange={changeHandler}
>
  <FileList figCaption="Attatchments">
    files.map((file) => {
      <FileListItem
        fileSize={file.size}
        actionProps{{ label: `Remove ${file.name}`, onClick: handleFileClick }}
      >
        {file.name}
      </FileListItem>
    })
  </FileList>
</InputFile>

Caveats

• "aria-label": Should be the text content of the label prop. This is used to override React Aria DropZone that sets it's own aria-label.
• accept: Does not currently support wildcard (for example "*" or "image/*")

Stylesheets & custom markup

Import stylesheet:

@import url("@sikt/sds-form");
@import url("@sikt/sds-input-file");

Create custom markup:

<!-- N/A -->