> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/fileuploadinput/code/subcomponents.md).

# SubComponents

### Control

The control subcomponent is required to render the `Control` of the FileUploadInput component. Because of this, this component extends the native [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)component props.  Because of this, you can use all of the native props. This is a required children.

### Control API

{% hint style="danger" %}
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. 
{% endhint %}

| Props                   | Type                                                 | Required |
| ----------------------- | ---------------------------------------------------- | -------- |
| `fileName`              | `string`                                             | :x:      |
| `defaultFileName`       | `string`                                             | :x:      |
| `hasError`              | `boolean`                                            | :x:      |
| `isDisabled`            | `boolean`                                            | :x:      |
| `isReadOnly`            | `boolean`                                            | :x:      |
| `acceptedFiles`         | `string`                                             | :x:      |
| `explorerAcceptedFiles` | `'Audio' \| 'Images' \| 'All' \| 'Video' \| string;` | :x:      |
| `placeholder`           | `string`                                             | :x:      |
| `onFileClear`           | `(e: FileUploadInputOnFileClearProps) => void;`      | :x:      |
| `onChange`              | `(e: FileUploadInputOnChangeProps) => void;`         | :x:      |

<details>

<summary>fileName</summary>

This controls the `FileUploadinput` fileName when using a controlled approach.

</details>

<details>

<summary>defaultFileName</summary>

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

</details>

<details>

<summary>acceptedFiles and explorerAcceptedFiles</summary>

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 i`nput[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.&#x20;

</details>

<details>

<summary>placeholder</summary>

Value shown if the fileName is undefined.

</details>

<details>

<summary>onFileClear</summary>

Callback called when the 'x' icon is clicked.

</details>

<details>

<summary>onChange</summary>

Executed when the fileName changes.

</details>

### 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.`](/sds/sds-3.0/sds-components/components/button/code.md)

{% code title="Example:" %}

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

{% endcode %}

### HelpText

The HelpText subcomponent extends the SDS label component. See for reference: [HelpText](/sds/sds-3.0/sds-components/components/helptext.md).

### Label

The Label subcomponent extends the SDS label component. See for reference: [Label](broken://pages/TwCP2I3z2hP5oGNIUov2)