grommet
components

FileInput

a control to input one or more files

Drop file here or browse
Storybook
CodeSandbox

Props

disabled

Whether the control is disabled.
truefalse

id

The id attribute of the input.
"string"

messages

Custom messages for FileInput. Used for accessibility by screen readers.

{
browse:
"string,"
dropPrompt:
"string,"
dropPromptMultiple:
"string,"
files:
"string,"
remove:
"string,"
removeAll: string
}

multiple

Whether to allow multiple files. If an object is supplied, 'aggregageThreshold' indicates the maximum number of individual files to show. Above this, only a single message describing the number of files will be shown.

truefalse
{
aggregateThreshold: number
}

name

The name attribute of the input. This is required when used within a Form.

"string"

onChange

Function that will be called when one or more files are added to the input. The file(s) can be found in event.target.files.

({ target: { files } }) => {...}

renderFile

Provides custom rendering of the file. If not provided, the file's name will be shown. It will be passed the browser File object as an argument. For example: (file) => <Text>{file.name}</Text>

"function"

Theme

global.input.font.height

The line-height of the text.
string

global.input.font.size

The size of the text.
string

global.input.font.weight

The font-weight of the text. This value will only be applied if global.input.weight is undefined.

600

global.input.weight

This value has been deprecated and replaced by global.input.font.weight.

number | string

global.input.padding

The padding of the text.
{
  "horizontal": "11px",
  "vertical": "11px"
}

global.input.extend

Any additional style for an input.
"any CSS"
(props) => {}

fileInput.background

The background prop for the container.
string | object

fileInput.border

The border prop for the container.
{
  "side": "all",
  "size": "small",
  "style": "dashed"
}

fileInput.dragOver.background

Background to use when dragging over.
string | object

fileInput.dragOver.border

Background to use when dragging over.
{"color": "control"}

fileInput.dragOver.extend

Any additional style for container when dragging over it.
"any CSS"
(props) => {}

fileInput.extend

Any additional style for container.
"any CSS"
(props) => {}

fileInput.hover.background

Background to use when hovering.
string | object

fileInput.hover.border

Background to use when hovering.
{"color": "brand"}

fileInput.hover.extend

Any additional style for container when hovering over it.
"any CSS"
(props) => {}

fileInput.icons.remove

The icon to use for the control to remove a chosen file.

fileInput.label

The Text props to use for the file label.
{"margin": "small"}

fileInput.message

The Text props to use for the message shown before a file has been selected.

{"margin": "small"}

fileInput.pad

The pad prop for the container.
string | object

fileInput.round

The round prop for the container.
string | object