Broken uploaded images in Vercel Blob via Express JS

Question

i got a express js server (node version: v21.7.1) hosted on vercel, when i try to upload photo on blob via express server, everything works just fine apart from the fact that the images uploaded are broken and only of 15B.

I tried two ways to solve this issue but in both ways the only thing that i got back is 200 status code but with a 15B images, even if the image has been uploaded correctly (notice also that i'm testing everything on postman).

1. PUT call Route:

import multer from "multer";
const upload = multer();

router.route('/:id').put(upload.single('photo'), userController.updateUser)

Controller:

export const updateUser = catchAsync(async (req, res, next) => {
  try{  
    if(req.file){
      const filename = `user-${req.user.id}-${Date.now()}.jpeg`;
      console.log(req.file);

      const result = await put(filename, req.file, 
        { access: 'public', 
        token : process.env.BLOB_READ_WRITE_TOKEN,
        addRandomSuffix: false,
      },); 
     
      console.log({result});
    }

    //db stuff...

} catch (err) {
  res.status(400).json({
    status: 'error',
    message: err.message,
  });
}
});

Console result:

{
  fieldname: 'photo',
  originalname: '_ (20).jpeg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 48 00 48 00 00 ff db 00 43 00 06 04 05 06 05 04 06 06 05 06 07 07 06 08 0a 10 0a 0a 09 09 0a 14 0e 0f 0c ... 34195 more bytes>,
  size: 34245
}
{
  result: {
    url: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/user-65e31000c48a3a97e1a5147a-1711101529160.jpeg',
    downloadUrl: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/user-65e31000c48a3a97e1a5147a-1711101529160.jpeg?download=1',
    pathname: 'user-65e31000c48a3a97e1a5147a-1711101529160.jpeg',
    contentType: 'image/jpeg',
    contentDisposition: 'inline; filename="user-65e31000c48a3a97e1a5147a-1711101529160.jpeg"'
  }
}

2. POST call:

Route:

router.post('/uploadPhoto', upload.single('photo'), userController.uploadFile);

Controller:

 export const uploadFile = async (req, res) => {
  try {
    const file = req.file;
    console.log({file});
    const blob = await put(file.originalname, file, { access: 'public' , token : process.env.BLOB_READ_WRITE_TOKEN,  });
    console.log({blob});
    res.json({blob});
  } catch (err) {
    res.status(500).json({ error: 'An error occurred while uploading the file.' });
  }
}

Console result:

{
  file: {
    fieldname: 'photo',
    originalname: '_ (13).jpeg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 48 00 48 00 00 ff db 00 43 00 06 04 05 06 05 04 06 06 05 06 07 07 06 08 0a 10 0a 0a 09 09 0a 14 0e 0f 0c ... 21792 more bytes>,
    size: 21842
  }
}
{
  blob: {
    url: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/_%20(13)-uUVosoz5TYonKwqvrrso3dWtPjX8ON.jpeg',
    downloadUrl: 'https://jjsfgfmzoftauon7.public.blob.vercel-storage.com/_%20(13)-uUVosoz5TYonKwqvrrso3dWtPjX8ON.jpeg?download=1',
    pathname: '_ (13).jpeg',
    contentType: 'image/jpeg',
    contentDisposition: 'inline; filename="_%20(13).jpeg"'
  }
}

Please notice that both ways are being tested on local host and on vercel and in both cases i got the same issue. Notice also that i'm sending data via form-data option in postman

P.S. I don't know why but within the thousand of tests that i made in these days, one time i got it right: But i honestly cant remember how i ended up doin that.

I you need other information, please let me know. Thanks.

EDIT:

Problem solved✅

I was very stupid problem:

await put(file.originalname, file.buffer, { ... });

I just need to pass the buffer and not the whole file