# openAssetPicker method example

Learn more about how to use the openAssetPicker method with this example.

This document provides an example on how to use the `openAssetPicker` method. It allows you to pick an image from your Hygraph project assets library, and add it to your entry in the content editor. It can be used as an entry field or as part of the sidebar.

Here are the examples of both:

## openAssetPicker as entry field

```ts
function AssetPicker() {
  const { value, onChange, openAssetPicker } = useFieldExtension();

  const onAssetPicker = () => {
    openAssetPicker().then((imageResult) => {
      if (imageResult !== null) {
        onChange(imageResult);
      }
    });
  };

  return (
    <div>
      {value && (
        <Image src={value.url} width={value.width / 3} alt={value.fileName} />
      )}
      <button onClick={onAssetPicker}>Pick Image</button>
    </div>
  );
}
```

This method is mostly used for example purposes. For other uses we have a native [asset picker](https://hygraph.com/classic-docs/api-reference/schema/field-types#asset) you can use instead.

## openAssetPicker in sidebar

```ts
const { openAssetPicker } = useFormSidebarExtension();
// or
// const { openAssetPicker } = useFieldExtension();

const onAssetPicker = () => {
  openAssetPicker().then((imageResult) => {
    if (imageResult !== null) {
      // do something with the picked asset
      console.log(imageResult);
    }
  });
};
```