payload
payload copied to clipboard
Getting upload file arrayBuffer server side in validation function fails with "Attempted to call a temporary Client Reference"
Describe the Bug
I have an upload collection that I validate with a sibling checkbox field. The checkbox field has a validation method which checks the options.siblingData.file
when it is populated and runs some file validations with the underlying File object.
This used to work in V2, but in V3 when trying to migrate my logic I end up with the error Error: Attempted to call a temporary Client Reference from the server but it is on the client.
(Maybe I am abusing an API that is not supposed to be public, if so please suggest an alternative that would allow me to validate a file server-side, loading the Blob in memory. I also explored hooks.beforeOperation
but could not give nice validation feedback in the UI to the user using it)
Link to the code that reproduces this issue
https://github.com/sacha-c/payload/commit/b119e4e32de790e09feb59d70e4ea12deddeee7b
Reproduction Steps
Have a collection with an upload configuration & a sibling field with a validation method that attempts to access the arrayBuffer
promise (or the stream()
or text()
methods also)
upload: {
// My upload config
...
}
fields: [
{
name: 'test',
type: 'checkbox',
validate: async (_, options): Promise<string | true> => {
if (!('file' in options.siblingData)) {
// Payload has not loaded the file yet, pass validation
return true
}
try {
const result = await (options.siblingData.file as File).arrayBuffer()
console.log('result', result)
// perform validation with the arrayBuffer, loading it in memory & checking details of the object
// ...
} catch (error) {
console.log('error', error)
}
return true
},
},
],
Logs:
error Error: Attempted to call a temporary Client Reference from the server but it is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
...
Which area(s) are affected? (Select all that apply)
area: core
Environment Info
Payload: 3.8.0
Node.js: 22.6.0
Next.js: 15.0.3