# FilePicker

*Category:* Components
*Section:* Pickers
*Source:* https://uikit.developers.rio.cloud/#/components/filePickers
*Captured:* 2026-04-27T14:57:41.458Z

## FilePicker

### Example: Example 1

FilePicker for single images Select image

#### React (tsx)

```tsx
import { useState } from 'react';

import FilePicker from '@rio-cloud/rio-uikit/FilePicker';

const accept = { 'image/jpeg': ['.jpg', '.jpeg'], 'image/png': ['.png'], 'image/svg': [] };

const FilePickerExample = () => {
    const [files, setFiles] = useState<File[]>([]);

    const handleDeleteFiles = (id: number) => setFiles([...files.filter((_, index) => index !== id)]);

    return (
        <div className='div'>
            <label>FilePicker for single images</label>
            <FilePicker
                label='Select image'
                className='margin-bottom-20'
                onPick={(acceptedFiles: FileList | null) => setFiles([...(acceptedFiles ?? [])])}
                multiple={false}
                accept={accept}
            />
            {(files as FileWithPreview[]).map((file, id) => (
                <FilePreview file={file} key={file.name} id={id} onDelete={handleDeleteFiles} />
            ))}
        </div>
    );
};

type FileWithPreview = File & { preview: string };

type FilePreviewProps = { id: number; file: FileWithPreview; onDelete: (id: number) => void };

const FilePreview = ({ file, id, onDelete }: FilePreviewProps) => (
    <div className='panel panel-default position-relative'>
        <div className='panel-heading border-none line-height-125rel word-break-all'>
            <b>{file.name}</b>
        </div>
        <RemoveImageButton id={id} onDelete={onDelete} />
        <div className='panel-body padding-top-0'>
            {'preview' in file && <img className='img-responsive' src={file.preview as string} alt={file.name} />}
        </div>
    </div>
);

type RemoveImageButtonProps = { id: number; onDelete: (id: number) => void };

const RemoveImageButton = ({ id, onDelete = () => {} }: RemoveImageButtonProps) => (
    <div
        onClick={() => onDelete(id)}
        className={
            'width-20 aspect-ratio-1 rounded-circle bg-white border border-color-light ' +
            'display-grid place-items-center cursor-pointer position-absolute top-0 right-0 ' +
            'translate-x50pct-y-50pct'
        }
    >
        <span className='rioglyph rioglyph-remove text-size-12' />
    </div>
);

export default FilePickerExample;
```

#### HTML (html)

```html
<div class="div">
    <label>FilePicker for single images</label>
    <div class="FilePicker">
        <button type="button" class="btn btn-default btn-component margin-bottom-20" tabindex="0">Select image</button>
        <div role="presentation" tabindex="0">
            <input accept="image/jpeg,.jpg,.jpeg,image/png,.png,image/svg" type="file" tabindex="-1" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| displayMode | 'button' \| 'dropzone' \| 'full' | 'button' | Defines the file picker display mode. Possible values are 'button' for a single button, 'dropzone' for a custom dropzone passed as child function, or 'full' for showing both. |
| multiple | boolean | true | Indicating if multiple files may be selected. |
| label | string \| ReactNode | 'Select files' | Text to display on Button if displayMode is set to "button". |
| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
| onPick | (files: File[], rejectedFiles: FileRejection[]) => void | — | Function called after one or multiple files have been picked. |
| className | string | — | Additional classes for the select button. |
| fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |
| children | ({ isDragActive }: FilePickerRenderProps) => React.ReactElement | — | Pass a custom dropzone element as function receiving some render props. |

### Example: Example 2

FilePicker for multiple images and with dropzone Select multiple Images Drag & drop files here, or click to select files

#### React (tsx)

```tsx
import { useState } from 'react';

import FilePicker from '@rio-cloud/rio-uikit/FilePicker';

const accept = { 'image/jpeg': ['.jpg', '.jpeg'], 'image/png': ['.png'], 'image/svg': [] };

const FilePickerWithDropzoneExample = () => {
    const [files, setFiles] = useState<File[]>([]);

    const handleDeleteFiles = (id: number) => setFiles([...files.filter((_, index) => index !== id)]);

    return (
        <div>
            <label>FilePicker for multiple images and with dropzone</label>
            <FilePicker
                displayMode='full'
                label='Select multiple Images'
                className='margin-bottom-20'
                onPick={(acceptedFiles: FileList | null) =>
                    setFiles(previousFiles => [...previousFiles, ...(acceptedFiles ?? [])])
                }
                accept={accept}
                fullHeight
            >
                {/* as long as the component accepts a "isDragActive" prop, you can just use it like this: */}
                {dropArea}
            </FilePicker>
            <div className='display-grid grid-cols-1 grid-cols-3-sm gap-25 margin-top-20'>
                {(files as FileWithPreview[]).map((file, id) => (
                    <FilePreview file={file} key={file.name} id={id} onDelete={handleDeleteFiles} />
                ))}
            </div>
        </div>
    );
};

type FileWithPreview = File & { preview: string };

type FilePreviewProps = { id: number; file: FileWithPreview; onDelete: (id: number) => void };

const FilePreview = ({ file, id, onDelete }: FilePreviewProps) => (
    <div className='panel panel-default position-relative'>
        <div className='panel-heading border-none line-height-125rel word-break-all'>
            <b>{file.name}</b>
        </div>
        <RemoveImageButton id={id} onDelete={onDelete} />
        <div className='panel-body padding-top-0'>
            {'preview' in file && <img className='img-responsive' src={file.preview as string} alt={file.name} />}
        </div>
    </div>
);

type RemoveImageButtonProps = { id: number; onDelete: (id: number) => void };

const RemoveImageButton = ({ id, onDelete = () => {} }: RemoveImageButtonProps) => (
    <div
        onClick={() => onDelete(id)}
        className={
            'width-20 aspect-ratio-1 rounded-circle bg-white border border-color-light ' +
            'display-grid place-items-center cursor-pointer position-absolute top-0 right-0 ' +
            'translate-x50pct-y-50pct'
        }
    >
        <span className='rioglyph rioglyph-remove text-size-12' />
    </div>
);

const dropArea = ({ isDragActive }: { isDragActive: boolean }) => (
    <div
        className={
            'rounded border border-style-dashed border-color-gray bg-lightest ' +
            'text-center text-color-darker opacity-50 padding-20 cursor-pointer'
        }
    >
        <div className='margin-10'>
            {isDragActive ? 'Drop files here ...' : 'Drag & drop files here, or click to select files'}
        </div>
    </div>
);

export default FilePickerWithDropzoneExample;
```

#### HTML (html)

```html
<div>
    <label>FilePicker for multiple images and with dropzone</label>
    <div class="FilePicker">
        <button type="button" class="btn btn-default btn-component margin-bottom-20" tabindex="0">Select multiple Images</button>
        <div role="presentation" tabindex="0" class="height-100pct">
            <input accept="image/jpeg,.jpg,.jpeg,image/png,.png,image/svg" multiple="" type="file" tabindex="-1" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
            <div class="rounded border border-style-dashed border-color-gray bg-lightest text-center text-color-darker opacity-50 padding-20 cursor-pointer">
                <div class="margin-10">Drag &amp; drop files here, or click to select files</div>
            </div>
        </div>
    </div>
    <div class="display-grid grid-cols-1 grid-cols-3-sm gap-25 margin-top-20">
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| displayMode | 'button' \| 'dropzone' \| 'full' | 'button' | Defines the file picker display mode. Possible values are 'button' for a single button, 'dropzone' for a custom dropzone passed as child function, or 'full' for showing both. |
| multiple | boolean | true | Indicating if multiple files may be selected. |
| label | string \| ReactNode | 'Select files' | Text to display on Button if displayMode is set to "button". |
| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
| onPick | (files: File[], rejectedFiles: FileRejection[]) => void | — | Function called after one or multiple files have been picked. |
| className | string | — | Additional classes for the select button. |
| fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |
| children | ({ isDragActive }: FilePickerRenderProps) => React.ReactElement | — | Pass a custom dropzone element as function receiving some render props. |

### Example: You have no file selected yet

FilePicker for all files and with dropzone only Drag & drop PDF files here or click to select

You have no file selected yet

#### React (tsx)

```tsx
import { useState } from 'react';

import FilePicker from '@rio-cloud/rio-uikit/FilePicker';

const FilePickerDocumentExample = () => {
    const [file, setFile] = useState<File | undefined>();

    return (
        <div>
            <label>FilePicker for all files and with dropzone only</label>
            <FilePicker
                displayMode='dropzone'
                className='margin-bottom-20'
                onPick={(acceptedFiles: FileList | null) => setFile(acceptedFiles?.[0])}
                multiple={false}
            >
                {dropArea}
            </FilePicker>
            <FilePreview file={file as unknown as FileWithMetadata | undefined} />
        </div>
    );
};

const dropArea = ({ isDragActive }: { isDragActive: boolean }) => (
    <div
        className={`
            rounded border border-style-dashed border-color-gray bg-lightest text-size-14
            text-center text-color-darker opacity-50 padding-25 cursor-pointer
        `}
    >
        <span className='rioglyph rioglyph-files text-size-200pct opacity-50 margin-top-20' />
        <div className='margin-top-10'>
            {isDragActive ? 'Drop files here ...' : 'Drag & drop PDF files here or click to select'}
        </div>
    </div>
);

type FileWithMetadata = File & { lastModifiedDate: string; path: string };

const FilePreview = ({ file }: { file: FileWithMetadata | undefined }) => (
    <div className='panel panel-default margin-top-20'>
        <div className='panel-body'>
            {file && (
                <>
                    <div>
                        <b>{`${file?.name}`}</b>
                    </div>
                    <ul className='margin-0'>
                        <li>
                            <label className='margin-right-10'>type: </label>
                            <i>{`${file?.type}`}</i>
                        </li>
                        <li>
                            <label className='margin-right-10'>size: </label>
                            <i>{`${file?.size}`}</i>
                        </li>
                        <li>
                            <label className='margin-right-10'>lastModified: </label>
                            <i>{`${file?.lastModified}`}</i>
                        </li>
                        <li>
                            <label className='margin-right-10'>lastModifiedDate: </label>
                            <i>{`${file?.lastModifiedDate}`}</i>
                        </li>
                        <li>
                            <label className='margin-right-10'>path: </label>
                            <i>{`${file?.path}`}</i>
                        </li>
                    </ul>
                </>
            )}
            {!file && <div className='text-color-dark text-italic'>You have no file selected yet</div>}
        </div>
    </div>
);

export default FilePickerDocumentExample;
```

#### HTML (html)

```html
<div>
    <label>FilePicker for all files and with dropzone only</label>
    <div class="FilePicker">
        <div role="presentation" tabindex="0">
            <input type="file" tabindex="-1" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
            <div class="
            rounded border border-style-dashed border-color-gray bg-lightest text-size-14
            text-center text-color-darker opacity-50 padding-25 cursor-pointer
        ">
                <span class="rioglyph rioglyph-files text-size-200pct opacity-50 margin-top-20">
                </span>
                <div class="margin-top-10">Drag &amp; drop PDF files here or click to select</div>
            </div>
        </div>
    </div>
    <div class="panel panel-default margin-top-20">
        <div class="panel-body">
            <div class="text-color-dark text-italic">You have no file selected yet</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| displayMode | 'button' \| 'dropzone' \| 'full' | 'button' | Defines the file picker display mode. Possible values are 'button' for a single button, 'dropzone' for a custom dropzone passed as child function, or 'full' for showing both. |
| multiple | boolean | true | Indicating if multiple files may be selected. |
| label | string \| ReactNode | 'Select files' | Text to display on Button if displayMode is set to "button". |
| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
| onPick | (files: File[], rejectedFiles: FileRejection[]) => void | — | Function called after one or multiple files have been picked. |
| className | string | — | Additional classes for the select button. |
| fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |
| children | ({ isDragActive }: FilePickerRenderProps) => React.ReactElement | — | Pass a custom dropzone element as function receiving some render props. |