> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/filepicker.md).

# FilePicker

This component is used to upload files to server

This component allows to upload user's files to the server. You have to prepare special backend API to accept these files and delete them.

```tsx
import {} from 'altrone-ui';

const onSuccessHandler = useCallback((response) => {
    alert(response);
});

const onDeleteHandler = useCallback((response) => {
    alert(response);
});

return <FilePicker 
    url="/path/to/upload" 
    method="POST" 
    name="file" 
    onSuccess={onSuccessHandler} 
    onDelete={onDeleteHandler}
/>
```

{% embed url="<https://apcom52.github.io/altrone-ui/?path=/docs/forms-filepicker--documentation>" %}
FilePicker Demo
{% endembed %}

## File uploading

When user selects files FilePicker automatically upload them into your server. For each selected file FilePicker automatically uploaded to the passed URL address in the `url` parameter with the `method` method. The body of this request will be an object with only one field: `{ [name]: <selected file> }`

If uploading was successful FilePicker takes the response of the request as file URL. If you have complex response you can create custom response parser via `getFileNameFunc` prop.&#x20;

If the file upload fails FilePicker shows an error message and allow to reupload the file.&#x20;

## Deleting files

Also user can delete his files. When user clicks on the "Delete" button FilePicker sends `DELETE` request to `url`. Body of the request is: `{ [name]: '/path/to/image.png' }` .&#x20;

## File extensions

By default user can upload any file. But you can set a filter by file extension or file extension groups.&#x20;

There are 8 predefined groups of extensions. To use it just pass the group name as `extensions` value.&#x20;

<table><thead><tr><th width="185.5">Group</th><th>Extensions</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>.doc</code> <code>.docx</code> <code>.pdf</code> <code>.txt</code></td></tr><tr><td><code>image</code></td><td><code>.jpg</code> <code>.jpeg</code> <code>.gif</code> <code>.png</code> <code>.svg</code> <code>.tiff</code> <code>.tif</code></td></tr><tr><td><code>audio</code></td><td><code>.mp3</code> <code>.wav</code> <code>.aac</code> <code>.m4a</code></td></tr><tr><td><code>video</code></td><td><code>.mp4</code> <code>.avi</code> <code>.mov</code></td></tr><tr><td><code>table</code></td><td><code>.xls</code> <code>.xlsx</code> <code>.ods</code></td></tr><tr><td><code>presentation</code></td><td><code>.ppt</code> <code>.pptx</code> <code>.odp</code> <code>.key</code></td></tr><tr><td><code>code</code></td><td><code>.c</code> <code>.class</code> <code>.cpp</code> <code>.cs</code> <code>.h</code> <code>.java</code> <code>.php</code> <code>.py</code> <code>.sh</code> <code>.swift</code> <code>.vb</code> <code>.js</code> <code>.css</code> <code>.html</code></td></tr><tr><td><code>archive</code></td><td><code>.zip</code> <code>.rar</code> <code>.7z</code> <code>.tar.gz</code></td></tr></tbody></table>

If they don't suit you, then you can pass your own string of all possible extensions.&#x20;

## Properties

| Property                                               | Type                                | Description                                                                                                                  |
| ------------------------------------------------------ | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **`url`**<mark style="color:red;">**`*`**</mark>       | `string`                            | API address to which the request will be sent                                                                                |
| **`name`**<mark style="color:red;">**`*`**</mark>      | `string`                            | Body parameter name                                                                                                          |
| **`method`**<mark style="color:red;">**`*`**</mark>    | `HTMLFormElement['method']`         | API Method. Default value is `GET`                                                                                           |
| **`onSuccess`**<mark style="color:red;">**`*`**</mark> | `(response: unknown) => void`       | Callback is called when file was loaded successfully                                                                         |
| **`onDelete`**<mark style="color:red;">**`*`**</mark>  | `(response: unknown) => void`       | Callback is called when file was deleted successfully                                                                        |
| **`variant`**                                          | `FilePickerVariant`                 | Variant of FilePicker. Default value is `default`                                                                            |
| **`defaultValue`**                                     | `{ filename: string; src: string }` | Default list of the files                                                                                                    |
| **`extensions`**                                       | `FileExtensions \| string`          | Possible extensions of the files. If `undefined` user can upload any file                                                    |
| **`placeholder`**                                      | `string`                            | Placeholder of the control                                                                                                   |
| **`maxFiles`**                                         | `number`                            | Maximum possible number of uploaded files. Default value is `1`                                                              |
| **`getFileNameFunc`**                                  | `(response: string) => string`      | Custom function of getting uploaded file src                                                                                 |
| **`surface`**                                          | `Surface`                           | Surface of the FilePicker. Default value is `glass`                                                                          |
| **`maxFileSize`**                                      | `number`                            | Max size of uploaded files. When user uploads a file with larger size shows the error message. Default value is `undefined`. |
| **`className`**                                        | `string`                            | Custom CSS class                                                                                                             |

## History

* **`Altrone 2.2`**:
  * added `maxFileSize` prop
* **`Altrone 2.0`**: initial release