SubComponents

Control

The control subcomponent is required to render the Control of the FileUploadInput component. Because of this, this component extends the native inputcomponent 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, isReadOnly 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
fileName	string	❌
defaultFileName	string	❌
hasError	boolean	❌
isDisabled	boolean	❌
isReadOnly	boolean	❌
acceptedFiles	string	❌
explorerAcceptedFiles	'Audio' | 'Images' | 'All' | 'Video' | string;	❌
placeholder	string	❌
onFileClear	(e: FileUploadInputOnFileClearProps) => void;	❌
onChange	(e: FileUploadInputOnChangeProps) => void;	❌

fileName

This controls the FileUploadinput fileName when using a controlled approach.

defaultFileName

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

acceptedFiles and explorerAcceptedFiles

Similar to the standard HTML file input element (input[type='file']), our FileUploadInput component allows you to specify a list of file extensions separated by commas. We've built-in automatic validation, which means we'll check the file's extension for you. If the uploaded file has an extension that isn't on your list, we won't allow it to be uploaded. Here's the important part: While the "accept" attribute in HTML input[type='file'] elements provides a visual filter to guide users, it can be bypassed by determined users. They can manually select different file types in the file selection dialog or change the filter. That's the main difference between both, the explorerAcceptedFiles does not do any validation on the client side, just set a filter on the explore, meanwhile the acceptedfiles will explicitly validate it.

placeholder

Value shown if the fileName is undefined.

onFileClear

Callback called when the 'x' icon is clicked.

onChange

Executed when the fileName changes.

Button

You can add your own custom <FileUploadInput.Button />. If no Node is provided, only the Input will be rendered. The <FileUploadInput.Button /> should always be a <FileUploadInput.Control> children. This subcomponent extends the native SDS Button props.

Example:

<FileUploadInput.Control>
     <FileUploadInput.Button
      isLoading={false}
      variant='primary' 
      iconAfter='upload'>
      A custom button
     </FileUploadInput.Button>
</FileUploadInput.Control>

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