Code

Props

Props	Data Type	Required
className	string	❌
id	string	✅
name	string	❌
label	string	❌
info	string	❌
description	string	❌
actionText	string	❌
helptext	string	❌
error	boolean	❌
errorMessage	string	❌
readOnly	boolean	❌
disabled	boolean	❌
removeButtonTooltipText	string	❌
files	'All' | 'Images' | 'Audio' | 'Video'	❌
onChange	Function	❌

Description

This component works exactly just like the FileUploadInput component, with the main difference it accepts multiple files instead a single one, and also it gives users the ability to drag and drop the files in the component dedicated area.

Event Response

Property	Data Type
id	string
files	[{ file: FileObj, fileExtension: string, fileName: string, fileURL: string }]
name	string
label	string

Example

<FileUploadRegion
  actionText="Browse files"
  className="FileUploadRegionExample"
  description="Drag and drop file(s) here or"
  errorMessage="Optional error message can offer better guidance."
  files="All"
  helptext="Optional help text can offer additional guidance."
  id="FileUploadRegion"
  info="Lorem Ipsum"
  label="Label Text"
  name="FileUploadRegionName"
  onChange={(e)=>{console.log(e)}}
  removeButtonTooltipText="Remove"
/>

Live Demo

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

React

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