I recieve image file object in formdata from user. On server I use formidable to parse that data. Then I have to convert that file to buffer to store in database. I am working in a nextjs project.

What I have tried so far --

Client side code:

let imgFile = document.querySelector("#imageInp").files[0];
let formData = new FormData();
formData.append("image", imgFile);
fetch("http://localhost:3000/data", { 
     method: 'POST',
     body: formData,
});

Server side code:

const data = await new Promise((resolve, reject) => { 
     const form = formidable(); 
     form.parse(req, (err, fields, files) => {
         if (err) reject({ err });
         resolve({ err: null, image: files.image, });
     });
});
if(data.err) return;

const arrBuf = await new Response(data.image).arrayBuffer();
const buffer = Buffer.from(arrBuf);

console.log("image size", data.image.size);
console.log("Array Buffer size", arrBuf.byteLength);
console.log("Buffer size", buffer.byteLength);

Output on console in server:

image size 444053
Array Buffer size 15
Buffer size 15

The code runs but it is not working as expected. The size of imgFile is arround 100 thousand bytes but the arrBuf.byteLength is coming out to be 15.

I tried to reproduce this again in another simple nodejs project but it is giving error that Response is not defined.

I have seen other answers on the internet but they tend to assume that the file is a text file and then they create buffer from its text.

There is blob.arrayBuffer() method but that feature is experimental in nodejs.

Edit: I am using Input(type file) element to receive images. I am sending images to server using fetch post request by attaching FormData to body of the request. Image files are of type image/jpeg. Response obj