Focal point not exposed in REST API

[RickGeersing]

Link to reproduction

No response

Describe the Bug

When I change the focal point of an media item I want to have that focal point in my frontend. As of now there is no focal point data in the response of that media item. Or am I doing something wrong with the focal point settings?

To Reproduce

1. Create a media collection that supports uploads
2. Set focalPoint to true on the upload section of that collection.
3. Upload an image
4. Click on edit image
5. Change the focus point a bit
6. Hit save
7. Switch to API tab
8. There should be no focal point data

Payload Version

2.1.0

Adapters and Plugins

No response

[JarrodMFlesch]

Hey @RickGeersing this is not a bug, currently the focal point data is only used to tell sharp how to crop the photo so we use it on the request and do not store it. I can see how it might be useful to store on the top level media though.

I think this is more of a feature request than a bug so I am going to move this to a discussion.

[coxmi]

This would be a great feature to have — I too thought it was a bug when I couldn't find it in the API tab. Is there any way to make this happen in the meantime using hooks?

[matthijs166]

Yeah same here. Is the data exposed in a hook so that we can store it into a field?

[jakehopking]

Adding my voice to this too. I was just exploring the possibility of using focalPoint with the css object-position property, and was confused why the saved focal point data wasn't viewable within the API request.

Please expose this.

[matthijs166]

After some digging is sawed that the focal point is exposed in the express request object.

You can store this info via this hook on to a field:

import { CollectionAfterChangeHook } from "payload/types"

export const storeFocalPointInfo: CollectionAfterChangeHook = async ({
    doc,
    req,
}) => {
    // Check if change is with an uploadEdit
    if (!req?.query?.uploadEdits) return doc

    type FocalPoint = {
        x: string,
        y: string,
    }

    const focalPoint: FocalPoint = req?.query?.uploadEdits['focalPoint']

    doc.focalPoint = {
        x: Math.round(new Number(focalPoint.x).valueOf() * 100) / 100,
        y: Math.round(new Number(focalPoint.y).valueOf() * 100) / 100,
    }
    return doc
}

The Problem I'm facing now is that the focal point selector cant read the value back.
When opening the edit popup, the value needs to be set from the collection field.

payload/packages/payload/src/admin/components/elements/EditUpload/index.tsx

Lines 252 to 261 in 4cfe473

	<Input
	name="X %"
	onChange={(value) => fineTuneFocalPoint({ coordinate: 'x', value })}
	value={pointPosition.x.toFixed(0)}
	/>
	<Input
	name="Y %"
	onChange={(value) => fineTuneFocalPoint({ coordinate: 'y', value })}
	value={pointPosition.y.toFixed(0)}
	/>

Cant find any hook to push the stored value into the modal or trigger JavaScript to write data to the input fields.

[coxmi]

@JarrodMFlesch, any chance you guys are thinking of moving this onto the roadmap? Appreciate you guys are busy with the move to Next.js, but this is a really important feature for our use case.

If you're open to accepting a PR, i'd be happy to work on this if someone could point me in the right direction.

Thanks!

[matthijs166]

What do you need to accomplice exactly?

[coxmi]

Generally just plopping the coordinates into object-position (alongside filling out srcset and sizes) to allow the frontend to deal with the focal point and image size selection. It's something we use on every site build just because it's so easy (currently — annoyingly — wordpress using this plugin)

[matthijs166]

We created our own component for now and disabled the default payload feature. Let me know if you got some improvements on our component.

Media collection

const Media: CollectionConfig = {
    slug: 'media',
    fields: [
        {
            name: 'alt',
            label: 'Alt',
            type: 'text',
        },
        {
            type: 'row',
            fields: [
                {
                    name: 'focusX',
                    type: 'number',
                    defaultValue: 50,
                },
                {
                    name: 'focusY',
                    type: 'number',
                    defaultValue: 50,
                },
            ],
            admin: {
                components: {
                    Field: FocusImageComponent
                }
            },
        }
    ],

FocusImageComponent

import React, { useState, useEffect } from "react";
import { useFormFields, useForm } from "payload/components/forms";
import { useConfig } from 'payload/components/utilities';
import "./FocusImage.scss";

type Props = { label: string, path: string, required: boolean };

export const FocusImageComponent: React.FC<Props> = ({ label, path, required }) => {
 const config = useConfig();
 const [imageUrl, setImageUrl]: [string, (value: string) => void] = useFormFields(([fields, dispatch]) => [
     fields[`url`].value as string, (value: string) => dispatch({ type: 'UPDATE', path: `url`, value: value })
 ]);

 const [x, setX]: [number, (value: number) => void] = useFormFields(([fields, dispatch]) => [
     fields[`focusX`].value as number, (value: number) => dispatch({ type: 'UPDATE', path: `focusX`, value: value })
 ]);
 const [y, setY]: [number, (value: number) => void] = useFormFields(([fields, dispatch]) => [
     fields[`focusY`].value as number, (value: number) => dispatch({ type: 'UPDATE', path: `focusY`, value: value })
 ]);

 const { setModified } = useForm();
 const [mouseDown, setMouseDown] = useState(false);

 useEffect(() => {
     if (!mouseDown) {
         window.removeEventListener('mouseup', handleMouseUp);
     }
 })

 const handleFocusChange = (e, drag = false) => {
     if (!e?.nativeEvent?.offsetY || !e?.nativeEvent?.offsetX) return;

     const focusOffset = [e.nativeEvent.offsetY, e.nativeEvent.offsetX];
     const imageSize = [e.target.clientHeight, e.target.clientWidth];
     const focusPointY = (((focusOffset[0]) / imageSize[0]) * 100).toFixed(3);
     const focusPointX = (((focusOffset[1]) / imageSize[1]) * 100).toFixed(3);

     setValues(Number(focusPointX), Number(focusPointY));
 }

 const handleMouseDown = (e) => {
     setMouseDown(true);
     window.addEventListener('mouseup', handleMouseUp);
 }

 const handleMouseUp = (e) => {
     setMouseDown(false);
 }

 const handleMouseMove = (e) => {
     if (mouseDown) {
         handleFocusChange(e);
     }
 }

 const setValues = (x: number, y: number) => {
     setX(x);
     setY(y);
     setModified(true);
 }


 return (
     <>
         {imageUrl &&
             <>
                 <div className="focus__heading">
                     <label className="field-label">Focus ({`X: ${x}%, Y: ${y}%`})</label>
                     <div className="focus__reset" onClick={() => setValues(50, 50)}>Reset Focus</div>
                 </div>
                 <figure className="focus__area">
                     <div className="focus__picker">
                         <img className="focus__picker__image" src={imageUrl as string} alt="" onClick={handleFocusChange} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} />
                         <span style={{ top: `${y}%`, left: `${x}%` }} className="focus__picker__indicator"></span>
                     </div>
                 </figure>
             </>
         }
     </>
 );
};

And some styling:

.focus__heading {
  display: flex;
  align-items: center;
  gap: 10px;

  .focus__reset {
    cursor: pointer;
    line-height: 25px;
    padding-bottom: 0.4807692308rem;
    text-decoration: underline;
  }

  .focus__reset:hover {
    text-decoration: underline;
  }
}

.focus__area {
  position: relative;
  user-select: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  background-color: var(--theme-elevation-100);
  user-select: none;

  box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.05), 0 10px 4px -8px rgba(0, 2, 4, 0.02);
  font-family: var(--font-body);
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.9230769231rem;

  .focus__picker {
    position: relative;
    width: 100%;
    background-color: #fff;
    cursor: crosshair;
    left: 0;
    bottom: 0;
    z-index: 1;

    .focus__picker__image {
      position: relative;
      object-fit: contain;
      height: 100%;
      width: 100%;
    }

    .focus__picker__indicator {
      position: absolute;
      width: 20px;
      height: 20px;
      background: rgba(0, 0, 0, 0.7);
      border: 0.5px solid #fff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

@media (max-width: 700px), (max-height: 300px) {
  .focus__picker {
    display: none;
  }
}

This also can be a solution (#4082 (comment))
It only doesn't load the position again with reopening the media.

[coxmi]

That's great, thanks so much for posting it! I'll give this a shot soon 🙂

I still think it's a great candidate for including in the core, so hopefully the team can comment on that at some point soon too.

[denolfe]

This feature has been released in https://github.com/payloadcms/payload/releases/tag/v2.18.0 via #6364.

focalX and focalY will now be added to the document. Any existing docs will need to be resaved in order to get the values added.