Next.js can't send ArrayBuffer via Server Action despite docs saying otherwise
Answered
aardani posted this in #help-forum
aardaniOP
Docs:
https://react.dev/reference/react/use-server
Demo:
https://codesandbox.io/p/devbox/nextjs-arraybuffer-server-action-36gvxn
Would like to know if someone can confirm for me :)
https://react.dev/reference/react/use-server
Demo:
https://codesandbox.io/p/devbox/nextjs-arraybuffer-server-action-36gvxn
Would like to know if someone can confirm for me :)
26 Replies
yup the documentation is wrong,
ArrayBuffer is not iterableplease send a PR
@joulev yup the documentation is wrong, `ArrayBuffer` is not iterable
aardaniOP
the React Documentation? wow
@Ray could you do this instead?
aardaniOP
This is what I ended up doing
aardaniOP
Answer
aardaniOP
I meant to say that its the same one as Ray's solution
Its a bit weird since FormData contains ArrayBuffer, but ArrayBuffer itself can't be sent
so u're saying FormData is serializable but ArrayBuffer is not? (talking to react)
o... kay
aardaniOP
OH
@aardani Its a bit weird since FormData contains ArrayBuffer, but ArrayBuffer itself can't be sent
FormData is [handled separately](https://github.com/facebook/react/blob/0ac3ea471fbcb7d79bc7d36179e960c72c779e76/packages/react-client/src/ReactFlightReplyClient.js#L238), same for Map and Set etc. other stuff are checked and only plain objects and [iterables](https://github.com/facebook/react/blob/0ac3ea471fbcb7d79bc7d36179e960c72c779e76/packages/react-client/src/ReactFlightReplyClient.js#L273-L276) are allowed. ArrayBuffer fails these checks, but TypedArray passes because it is iterableArrayBuffer by itself is serialisable, but not passable in the server action specificationaardaniOP
ArrayBuffer by itself is serialisable but its not Iterable desipte having
Array on its name...I tried this
And it sends fine to the server but in the server it says
even though when i printed the
const data2 = await (formData.get('image') as File).arrayBuffer()
const typedArray = new Uint8Array(data2)
console.log(typedArray.byteLength)
console.log(typedArray.length)
const something = await convertToWebpAction(typedArray)And it sends fine to the server but in the server it says
⨯ Error: Body exceeded 1 MB limit.even though when i printed the
.byteLength it shows 300kb 
nevermind, found the contentLength in the header to be
1279180using form data, the content Length is around 300kb which is close to the real size
aardaniOP
FormData is handled differently. but why can't they just handle ArrayBuffer differently?
For now, the conclusion is that if you want to send binary data, convert to Blob first then to FormData
good question, i doubt any of us knows. you should maybe make either a PR to facebook/react.dev or an issue to facebook/react
@joulev good question, i doubt any of us knows. you should maybe make either a PR to facebook/react.dev or an issue to facebook/react
aardaniOP
thanks for validating the question, have a nice day ^^
aardaniOP
wakeup
One of the collaborator responded and is indeed a mistake in the documentation.