btoa issue in bufferToBase64 function

[harrybaines]

Been following the buildspace AI avatar generator project and loving it so far!

I did come across an issue when creating the React app. In the bufferToBase64 function:

const bufferToBase64 = (buffer) => {
    let arr = new Uint8Array(buffer);
    const base64 = btoa(
        arr.reduce((data, byte) => data + String.fromCharCode(byte), '')
    )
    return `data:image/png;base64,${base64}`;
};

I had an issue with btoa not being defined:

error - ReferenceError: btoa is not defined

I did an npm install --save buffer and added import { btoa } from "buffer"; to pages/api/generate.js which fixed my issue. Not sure if anyone else had the same issue?

[AlmostEfficient]

This is likely an issue with your version of Node. Mb, should have clarified which versions this is a problem on, we missed it in QA

[harrybaines]

This is likely an issue with your version of Node. Mb, should have clarified which versions this is a problem on, we missed it in QA

Cool, FYI my version was v14.19.3.

[0xAli0x]

const buffer = require('buffer');

const BufferToBase64 = (binaryData) => {
  return buffer.from(binaryData).toString('base64');
};

I added this in my generate.js file and it worked fine!