Updating `upload` field does not visually apply the change

[carlcalderon]

Describe the Bug

In a custom field component using the dispatch action, provided by the useFormFields hook, to update another field does not work properly if the dispatch action is targeting an upload field. Other field types such as text work as expected.

The form state is updated but the change is not visually applied to the form.

If the upload field already has a value; clearing the upload field value first (through dispatch) and then setting the new value will render the previous value that was present before clearing the field.

In the custom field component:

const [fields, dispatch]: [FormState, (value: unknown) => void] = useFormFields(
  ([fields, dispatch]) => [fields, dispatch],
)

return (
  <button onClick={() => {
    dispatch({
      type: 'UPDATE',
      path: 'image',
      value: '6793e2d4a5f7da62c26d27e4', // existing media id
    })
  }}>Update image field</button>
)

Expected behavior

The form should visually update the upload field when the value is changed.

Actual behavior

The form state is updated but the change is not visually applied to the form.

Screenrecording

Screen recording provided by @akhrarovsaid. Disclaimer: Recording depicts an environment that was used during troubleshooting which is different than provided reproduction repository, but the issue still applies.

Editing---Post---Payload.webm

Other

Initial Discord community-help thread: https://discord.com/channels/967097582721572934/1332393258696970271

Link to the code that reproduces this issue

https://github.com/carlcalderon/payload-upload-field-issue

Reproduction Steps

1. Create two or more media collection entries.
2. Create a new "Example" entry selecting one of the media entries.
3. Update the code in src/components/CustomField.tsx to an id of a different media entry.
4. Open the "Example" entry in the admin panel.
5. Press the "Update image field" button. (Nothing visually changes)

Optional additional steps to verify form state:

6. (optional) Change the "title" field to enable the "Save" button.
7. (optional) Press the "Save" button.
8. (optional) Refresh page or navigate to admin dashboard and back. (The image field displays the new image)

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Payload: 3.19.0
Node.js: 20.11.1
Next.js: 15.1.5

[linobino1]

I just noticed that the upload field does also not apply changes from hooks on save, it needs a full page refresh.

[apttx]

i think the seo plugin's auto-generation feature has the same issue. it updates the value of the upload input it renders, but that component doesn't re-fetch the data when it's value changes.