FileInput

a control to input one or more files

Props

confirmRemove

Provides custom rendering of a confirmation that appears when the user attempts to remove a file or files.

function

The function will be passed an object containing 'onConfirm' and 'onCancel' callbacks. If 'onConfirm' is called, the file will be removed. If 'onCancel' is called, the file will remain.

({ onConfirm, onCancel }) => (
  <Layer onClickOutside={onCancel} onEsc={onCancel}>
      <Box>
          Are you sure you want to delete this file?
          <Box direction="row" gap="small">
             <Button label="Cancel" onClick={onCancel} />
             <Button label="Delete file" onClick={onConfirm} />
          </Box>
      </Box>
  </Layer>
)

disabled

Whether the control is disabled.

boolean

true

false

id

The id attribute of the input.

string

"file-input-id"

maxSize

Specifies a file size limit in bytes for FileInput.

number

messages

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

object


{
  browse: "browse", 
  dropPrompt: "Drop file here or", 
  dropPromptMultiple: "Drop files here or", 
  files: "files", 
  remove: "remove", 
  removeAll: "remove all",
  maxFile: "Attach a maximum of {max} files only."
}

multiple

Whether to allow multiple files.

boolean

true

false

object

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. 'max' indicates the maximum number of files that can be added.


{
  aggregateThreshold: number,
  max: number
}

name

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

string

"name"

onChange

Function that will be called when one or more files are added to or removed from the input.

function

The function will be passed two arguments: the event and an object with key 'files'. The file(s) can be found in event.target.files or by deconstructing files from the second argument. For example: (event, {files}) => {}.

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

renderFile

Provides custom rendering of the file. If not provided, the file's name will be shown.

function

The function will be passed the browser File object as an argument.

(file) => { <Text>{file.name}</Text> }

React/DOM Properties

At its core, the FileInput component is a regular <input> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for input elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.input.font.height

The line-height of the text.

string

"normal"

global.input.font.size

The size of the text.

string

"18px"

global.input.font.weight

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

string

"bold"

number

global.input.weight

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

string

"bold"

number

global.input.padding

The padding of the text.

string

"12px"

object

An object specifying padding for different sides of the component.


{ 
  top: "string", 
  bottom: "string", 
  left: "string", 
  right: "string", 
  horizontal: "string", 
  vertical: "string" 
}

global.input.extend

Any additional style for an input.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

fileInput.background

The background prop for the container.

string

A color or image url.

"neutral-1"

"url(//my.com/assets/img.png)"

object


{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}

where opacity could be:

"weak"

"medium"

"strong"

boolean

number

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

fileInput.border

The border prop for the container.

string

"horizontal"

"vertical"

"top"

"bottom"

"right"

"left"

object


{
  side: "all", 
  size: "small", 
  style: "dashed"
}


{
  color: "string" | { dark: "string", light: "string" },
  error: { color: "string" | { dark: "string", light: "string" } },
  position: "string",
  side: "string",
  size: "string",
  style: "string"
}

fileInput.dragOver.background

Background to use when dragging over.

string

A color or image url.

"neutral-1"

"url(//my.com/assets/img.png)"

object


{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}

where opacity could be:

"weak"

"medium"

"strong"

boolean

number

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

fileInput.dragOver.border

Border to use when dragging over.

string

"horizontal"

"vertical"

"top"

"bottom"

"right"

"left"

object


{
  color: "string" | { dark: "string", light: "string" },
  error: { color: "string" | { dark: "string", light: "string" } },
  position: "string",
  side: "string",
  size: "string",
  style: "string"
}

fileInput.dragOver.extend

Any additional style for container when dragging over it.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

fileInput.extend

Any additional style for container.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

fileInput.hover.background

Background to use when hovering.

string

A color or image url.

"neutral-1"

"url(//my.com/assets/img.png)"

object


{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}

where opacity could be:

"weak"

"medium"

"strong"

boolean

number

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

fileInput.hover.border

Background to use when hovering.

string

"horizontal"

"vertical"

"top"

"bottom"

"right"

"left"

object

{ color: "brand" }


{
  color: "string" | { dark: "string", light: "string" },
  error: { color: "string" | { dark: "string", light: "string" } },
  position: "string",
  side: "string",
  size: "string",
  style: "string"
}

fileInput.hover.extend

Any additional style for container when hovering over it.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

fileInput.icons.remove

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

React.Element

<FormClose />

fileInput.label

The Text props to use for the file label.

object

{ margin: "small" }

fileInput.message

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

object

{ margin: "small" }

fileInput.pad

The pad prop for the container.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

fileInput.round

The round prop for the container.

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"full"

"string"

object


{
  corner: "...",
  size: "..."
}

where corner could be:

"top"

"left"

"bottom"

"right"

"top-left"

"top-right"

"bottom-left"

"bottom-right"