SelectFileButton

How to get SelectFileButton

import { SelectFileButton } from 'fds/components';

Type: Component

Renders a Button which triggers a native file dialog, allowing the user to select a file. Generally used as a trigger for a file upload action. The allowed file types (MIME types) can be specified using a prop.

Props

# Name Type Description
1. [icon] String

The name of the icon displayed in the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
""
2. [iconAfter] String

The name of the icon displayed after the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
""
3. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
4. [label] String

The human readable label displayed in the component.

  Default value
""
5. [mimeTypesToAccept] String

Specifies which MIME types are accepted for upload.

For more information about MIME types, check the MDN documentation


  Default value
null
6. [onClick] Function

A callback that is called whenever the component is clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
7. onSelect Function

A callback that is called whenever a file is selected.


  Arguments
# Name Type Description
1. selectedFiles Array<File>

The currently selected files.

8. [tooltipContent] String | ReactElement

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

  Default value
null
Was this page helpful?