FileUploaderField

GitHub

Storybook

Example

Upload a file

Upload a fileYou can upload a file in CSV format by clicking the button below or dragging and dropping it into the box.

Allowed file types: .csv Max file size: 1000MB

<FileUploaderField
  name="file"
  label="Upload a file"
  value={value}
  onChange={setValue}
  onBlur={() => {}}
  allowedFileTypes={{
    "text/csv": [".csv"],
  }}
  texts={{
    title: "Upload a file",
    description:
      "You can upload a file in CSV format by clicking the button below or dragging and dropping it into the box.",
    uploadAgainMessage: "Upload another file: ",
    uploadingMessage: "Uploading...",
    uploadButtonLabel: "Choose a file",
    assistiveTextFileTypes: (fileTypes) =>
      fileTypes
        ? "Allowed file types: " + Object.values(fileTypes).flat().join(", ")
        : "",
    assistiveTextMaxSize: (maxSizeMb) =>
      maxSizeMb ? "Max file size: " + maxSizeMb + "MB" : "",
  }}
  renderIssue={() => "error"}
  maxFileSize={1000}
/>

Props

Name	Type	Default Value	Required	Description
texts	FileUploaderTexts		Yes	Texts used in the component
renderIssue	(issue: E | ErrorCode, file?: File) => Children		Yes	A function to render validation issues. It's used to display a user-friendly error message under the field.
issues	NonEmptyArray<E>		No	A non-empty array of validation issues for the field
maxFileSize	number		No	The maximum size of uploaded files, in megabytes.
allowedFileTypes	Record<string, string[]>		No	An object where the keys are MIME types and the values are file extensions.
validate	(file: File) => Promise<E>	async () => null	No	Custom validation function. If the function returns an error code, the file is considered invalid. Returning null means the file is valid.
height	string | number		No	The field height
isUploading	boolean		No	A parameter that allows external control of the uploading status.
label	string		Yes
disabled	boolean		No
hintPlacement	"bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"		No
autoFocus	boolean		No
onBlur	() => unknown		No
name	string		No
value	FileResult<E>		Yes
onChange	(value: FileResult<E>) => unknown		Yes
hint	string		No

Related components

• CheckboxField
• DateField
• Form
• NumberField
• RadioGroupField
• SelectField
• SliderField
• TextArea
• TextField
• TimeField