payloadcms / payloadcms/payload
Updating `upload` field does not visually apply the change
@AlessioGr is already working on this.
Since Jan 27, 2025.
- 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
- Create two or more
mediacollection entries. - Create a new "Example" entry selecting one of the
mediaentries. - Update the code in
src/components/CustomField.tsxto an id of a differentmediaentry. - Open the "Example" entry in the admin panel.
- Press the "Update image field" button. (Nothing visually changes)
Optional additional steps to verify form state:
- (optional) Change the "title" field to enable the "Save" button.
- (optional) Press the "Save" button.
- (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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.