PayloadCMS BlurHash

generateBlurHash.ts

import {APIError, CollectionBeforeValidateHook} from 'payload';
import {getPlaiceholder} from 'plaiceholder';

export const generateBlurHash: CollectionBeforeValidateHook = async ({data, operation, req}) => {
  if (operation === 'create' || operation === 'update') {
    try {
      const buffer = req?.file?.data;

      if (buffer) {
        const {base64} = await getPlaiceholder(buffer, {size: 32});

        return {
          ...data,
          blurhash: base64,
        };
      }
    } catch (error) {
      throw new APIError('Failed to generate blur data url');
    }
  }
};

HeaderBlockComponent.tsx

{image && 
  <ImageBox
    fill
    media={image as Media}
    sizes="(max-width: 1024px) 100vw, 50vw"
  />
}

ImageBox.tsx

import type {Media} from "@payload-types";
import Image from 'next/image'

interface ImageBoxProps {
  media: Media
  fill?: boolean
  sizes?: string
  imageClassName?: string
}

export const ImageBox: React.FC<ImageBoxProps> = (props) => {
  const {media, fill, imageClassName, sizes} = props

  const {width: imageWidth, height: imageHeight} = media;

  const width = imageWidth ?? undefined;
  const height = imageHeight ?? undefined;
  
  const objectPosition =
    media.focalX != null && media.focalY != null
      ? `${media.focalX}% ${media.focalY}%`
      : 'center';

  return (
    <Image
      src={`${media.url!}?${media.updatedAt}`} alt={`Image box alt`}
      quality={95}
      fill={fill}
      width={!fill ? width : undefined}
      height={!fill ? height : undefined}
      className={imageClassName}
      sizes={sizes}
      style={{
        objectFit: "cover",
        objectPosition
      }}
      placeholder={media.blurhash ? "blur" : "empty"}
      blurDataURL={media.blurhash || undefined}
    />
  )
}

Media.ts

import path from 'path'
import {fileURLToPath} from 'url'
import {CollectionConfig} from "payload";
import {generateBlurHash} from "@/hooks/generateBlurhash";

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export const Media: CollectionConfig = {
  slug: "media",
  upload: {
    staticDir: path.resolve(dirname, '../../public/media'),
    adminThumbnail: 'thumbnail',
    mimeTypes: ['image/*'],
    imageSizes: [
      {
        name: "medium",
        width: 1400,
        height: 800,
      },
    ],
  },
  fields: [
    {
      name: "alt",
      type: "text",
      label: "Alt Text",
    },
    {
      name: "blurhash",
      type: "text",
      admin: {
        hidden: true,
        disableListColumn: true,
        disableListFilter: true
      }
    }
  ],
  hooks: {
    beforeValidate: [generateBlurHash]
  }
};

export default Media;