SubComponents

Control

The control subcomponent is required to render the Control of the NumberInput component. Because of this, this component extends the native input[type='file']component props. Because of this, you can use all of the native props. This is a required children.

Control API

Notice that there is a difference between using hasError, isDisabled here or in the parent component. It is not recommended to change this props in the Control subcomponent, because this props can be inherited from the Wrapper. If you use it in the Control subcomponent, you will get the state only in the field.

Props	Type	Required
files	SDSFile[]	❌
defaultFileNames	SDSFile[]	❌
regionDescription	string	❌
actionText	string	❌
isDisabled	boolean	❌
hasError	boolean	❌
warningMessages	{ fileSize?: ReactNode; invalidFile?: ReactNode; }	❌
fileSizeConfig	{ fileSizeLimit?: number; fileSizeUnit?: 'Byte' | 'KB' | 'MB' | 'GB'; }	❌
acceptedFiles	'All' | 'Images' | 'Audio' | 'Video' | string;	❌
onFileRemove	(fileId: string) => void;	❌
onChange	(e: FileUploadRegionOnChangeProps) => void;	❌

files

This controls the FileUploadRegion files when using a controlled approach.

defaultFileNames

This controls the FileUploadRegionfiles when using a uncontrolled approach when the component is first rendered.

SDSFile Interface

  fileName: string;
  fileSize: string;
  fileURL?: string;
  fileId: string;
  fileExtension?: string;

regionDescription and actionText

String passed to render a description and to change the underlined text.

warningMessages

An object that receives the warning messages that will be shown when an invalidFile or and invalidSize of a file/files is passed.

fileSizeConfig

An object to set the fileSizeConfiguration, where you can pass the unit (MB,GB, etc) and the the fileSizeLimit, for example if you pass a fileSizeUnit of 'MB' and a fileSizeLimit of a 100, then the fileSizeMax is set to 100MB.

acceptedFiles

Similar to the standard HTML file input element (input[type='file']), our FileUploadRegion component allows you to specify a list of file extensions separated by commas.

onFileRemove

When using a controlled approach, to control what happens when the 'x' button on each file is clicked.

onChange

Used when having a controlled approach, when the files state changes.

HelpText

The HelpText subcomponent extends the SDS label component. See for reference: HelpText.

Label

The Label subcomponent extends the SDS label component. See for reference: Label