foris-js/src/bootstrap/FileInput.md

Bootstrap component for file input. Includes label and has predefined sizes and structure for using in foris forms.

All additional props are passed to the <input type="file"> HTML component.

import { useState } from "react";

const [files, setFiles] = useState([]);

// Note that files is not an array but FileList.
const label = files.length === 1 ? files[0].name : "Choose file";

<form className="col">
    <FileInput
        files={files}
        label={label}
        helpText="Will be uploaded"
        onChange={(event) => setFiles(event.target.files)}
    />
</form>;

FileInput with multiple files

import { useState } from "react";

const [files, setFiles] = useState([]);

// Note that files is not an array but FileList.
const label =
    files.length > 0
        ? Array.from(files)
              .map((file) => file.name)
              .join(", ")
        : "Choose files";

<form className="col">
    <FileInput
        files={files}
        label={label}
        helpText="Will be uploaded"
        onChange={(event) => setFiles(event.target.files)}
        multiple
    />
</form>;