Next.js Discord

Discord Forum

Next.js can't send ArrayBuffer via Server Action despite docs saying otherwise

Answered
aardani posted this in #help-forum
Open in Discord
Answered by aardani
View full answer

26 Replies

could you do this instead?
yup the documentation is wrong, ArrayBuffer is not iterable
please send a PR
@joulev yup the documentation is wrong, `ArrayBuffer` is not iterable
the React Documentation? wow
@Ray could you do this instead?
This is what I ended up doing
Answer
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
maybe this
OH
ArrayBuffer by itself is serialisable, but not passable in the server action specification
ArrayBuffer by itself is serialisable but its not Iterable desipte having Array on its name...
I tried this
        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 :meow_stare:
nevermind, found the contentLength in the header to be 1279180
using form data, the content Length is around 300kb which is close to the real size
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
wakeup
One of the collaborator responded and is indeed a mistake in the documentation.