> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Image picker

> Let the user choose photos from their gallery.

```tsx theme={null}
import { isAvailable, useImagePicker } from '@cskn/sdk';
import { FilePicker } from '@cskn/ui';

function PickPhotos() {
  const { open, loading } = useImagePicker();

  if (!isAvailable()) {
    return <FilePicker accept="image/*" multiple onSelect={uploadFiles} />;
  }

  const onClick = async () => {
    const result = await open({ multiple: true, quality: 0.7 });
    if (result.cancelled || result.error) return;
    result.assets!.forEach((asset) => upload(asset.uri));
  };

  return <button onClick={onClick}>{loading ? 'Opening…' : 'Choose photos'}</button>;
}
```

<Note>
  The picker exists only in a shell. In a browser, `open` resolves at once with `error: 'not_available'`. Use a file input or @cskn/ui's [`FilePicker`](/ui/components/forms#filepicker) there.
</Note>

## Options

<ParamField path="multiple" type="boolean" default="false">
  Allow selecting more than one image.
</ParamField>

<ParamField path="quality" type="number" default="0.7">
  JPEG quality from `0` to `1`.
</ParamField>

## Result

`{ assets?, cancelled, error? }`. Each asset has `uri` (a base64 data URL), `width`, `height`, `fileName` and `mimeType`. `error` is `'permission_denied'` when photo access is refused (permission is requested automatically), or `'not_available'` outside a shell.

Without the hook, use `openImagePicker(options)`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.