Image not getting displayed even though buffer is being uploaded

[GeoBrodas]

Client side

const [image, setImage] = useState<File>();
const [buffer, setBuffer] = useState();

const uploadFile = async () => {
    try {
      const reader = new FileReader();

      if (image) {
        reader.readAsDataURL(image);
      }

      const type = image!.type.split('/')[1];

      reader.onload = (readerEvent) => {
        setBuffer(readerEvent.target?.result);
        if (readerEvent.target) {
          console.log('fetching...');

          axios
            .post('/api/profile/upload-image', {
              //@ts-ignore
              userId: session.data?.user?._id,
              image: readerEvent.target?.result,
              type,
            })
            .then((res) => console.log(res));
        }
      };
    } catch (err) {
      console.log(err);
    }
  };

Server Side

  const { image, userId, type } = req.body;

  const wallet = new Wallet(devWalletKey);
  const storageAccount = new PublicKey(process.env.SHADOW_STORAGE_ACOUNT!);
  const drive = await new ShdwDrive(conn, wallet).init();

  const file: ShadowFile = {
    name: `${userId}.${type}`,
    file: image,
  };

  const response = await drive.uploadFile(storageAccount, file);

The image is getting uploaded but this is what i get in the GUI of Shadow storage

On opening the link to the image

[khaIilnafis]

Can you add me on discord so we can investigate a bit further into this storage account and the specific image? @khalilnafis

[GeoBrodas]

Alright!! I've sent you, the names @geobrodas

[khaIilnafis]

Closing, looks like an issue with nextjs parsing the request body for the image as a string.