openAssetPicker method

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

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 you can use instead.

#openAssetPicker in sidebar

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

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