payloadcms / payloadcms/payload

Updating `upload` field does not visually apply the change

Open
#10,800 4 comments 3 reactions 1 assignee View on GitHub

@AlessioGr is already working on this.

Since Jan 27, 2025.

area: ui
Dominant language
TypeScript
Stars
44.8k
Forks
4.2k
Avg merge
2d 21h
Merged PRs (30d)
53

Description

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.

https://github.com/user-attachments/assets/d2ddfc73-fd1c-4daa-86e6-027e6d50086a

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:

  1. (optional) Change the "title" field to enable the "Save" button.
  2. (optional) Press the "Save" button.
  3. (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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.