InputFile

Enables users to upload a file to complete a form.

InputFile

To implement InputFile component into your project you’ll need to add the import:

import InputFile from "@kiwicom/orbit-components/lib/InputFile";

After adding import into your project you can use it simply like:

<InputFile />

Props

Table below contains all types of the props available in the InputFile component.

NameTypeDefaultDescription
allowedFileTypesstring \| string[]You can specify allow file types. See MDN
buttonLabelTranslation"Select file"The label for the Button inside InputFile. See Functional specs
dataTeststringOptional prop for testing purposes.
idstringSet id for InputFile
errorReact.NodeThe error message for the Select. See Functional specs
fileNamestringThe name of selected file.
helpReact.NodeThe help message for the InputFile.
labelTranslationThe label for the InputFile.
namestringThe name for the InputFile.
onBlurevent => void \| PromiseFunction for handling onBlur event.
onChangeevent => void \| PromiseFunction for handling onChange event.
requiredbooleanIf true, the label is displayed as required.
onFocusevent => void \| PromiseFunction for handling onFocus event.
onRemoveFile() => void \| PromiseFunction for handling file name removing.
placeholderTranslationString"No file selected"The placeholder for the InputFile. See Functional specs
reffuncProp for forwarded ref of the InputFile. See Functional specs
spaceAfterenumAdditional margin-bottom after component. See this docs
tabIndexstring \| numberSpecifies the tab order of an element
widthstring100%Specifies width of InputFile
helpClosablebooleantrueWhether to display help as a closable tooltip, or have it open only while the field is focused, same as error.
insideInputGroupbooleanfalseSet to true if InputFile is inside InputGroup

Functional specs

  • The error prop overwrites the help prop, due to higher priority.

  • If you pass some string into placeholder it will be used as its placeholder.

  • If you pass some string into buttonLabel it will be used for button content.

  • ref can be used for example auto-focus the elements immediately after render.

class Component extends React.PureComponent<Props> {
componentDidMount() {
this.ref.current && this.ref.current.focus();
}
ref: { current: React.ElementRef<*> | null } = React.createRef();
render() {
return <InputFile ref={this.ref} />;
}
}