title: Image getting corrupted after uploading arrayBuffer and saving with fs in NodeJS
body: <p>I'm using arrayBuffer to send binary Image data to server. On front end, I'm doing this</p>
  <pre><code>    const addImage = async (ev) =&gt; {
          const file = ev.target.files[0];
          const xhr = new XMLHttpRequest();
          xhr.open('POST', '/api/uploadFile', true);
          xhr.onload = ((e) =&gt; {
              //
          })
          xhr.upload.onprogress = (e) =&gt; {
              console.log(e)
          }
  
          xhr.send(await file.arrayBuffer());
      }
  </code></pre>
  <p>On the server side, I'm taking the binary data and simply writing the data to file. Server Side code :</p>
  <pre><code>    try{
          console.log(req.body)
          const buffer = Buffer.from(req.body)
          fs.writeFileSync('./public/test.jpg', buffer);
          return res.json({success: true})
      }
      catch(error){
          return res.status(500).json({success: false, error: error.message})
      }    
  </code></pre>
  <p>This saves the file, but issue is that when I upload the image file, it somehow gets corrupted. When I checked with cat(the unix cat command), the binary data of original and uploaded file looks same.</p>
  <p><a href="https://i.stack.imgur.com/TjJXz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TjJXz.png" alt="enter image description here" /></a>
  cat command output. Original file on right, uploaded file on left</p>
  <p>The binary looks same, but when I do hexdump, the output is different on those files</p>
  <p>Here's the hexdump output: <a href="https://i.stack.imgur.com/xcoL5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xcoL5.png" alt="enter image description here" /></a></p>
  <p>I'm using NextJS. Can anyone provide some insight on what I'm doing wrong?</p>