Code

Props	Data Type	Required
className	string	❌
id	string	✅
name	string	❌
placeholder	string	❌
label	string	❌
info	string	❌
buttontext	string	❌
helpText	string	❌
error	boolean	❌
errorMessage	string	❌
readOnly	boolean	❌
disabled	boolean	❌
files	'All' | 'Images' | 'Audio' | 'Video'	❌
onChange	Function	❌

This component only allows users to select one single file. In the case developers would like the user to select multiple files, it is recommened to use instead the FileUploadRegion component.

Files

This feature sets filters for the OS finder to show just the selected file types. But this is not a filter to prevent the user from uploading or not different file types. That's a validation developers have to implement by themselves to have a better control of processes.

Event Response

Property	Data Type
id	string
file	file object
fileExtension	string
fileName	string
fileURL	string
name	string
label	string

Example

<FileUploadInput
  className="FileUploadInputExample"
  errorMessage="Optional error message can offer better guidance."
  files="Images"
  id="textInputId"
  name="textInputName"
  onChange={(e)=>{console.log(e)}}
  placeholder="Placeholder..."
/>

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / File Upload Input - Basic File Upload Input ⋅ Storybooksipster-react-component-storybook.netlify.app