> 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 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