How to upload screenshots from puppeteer to cloudinary or google bucket?

Question

I was saving screenshots to my react frontend build src folder, however I found out after deployment you cannot save images to this folder.

So I was looking into cloudinary and am confused with the documentation

I have my cloudinary setup like this:

cloudinary.config({


 cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET
});

After this line of code :

const screenshot = await page.screenshot({  });
cloudinary.uploader.upload(screenshot, function(error, result) {console.log(result, error)});

According to the docs that was their example, but I get nothing in my home library in the cloudinary?

Does anyone know how to just simply upload a screenshot to cloudinary or even google cloud bucket, so that my react front end app can actually render out the screenshot?

Thank you!

Answer 1

Take a screenshot picture as a base64 string then upload the image string:

const screenshot = await page.screenshot({ encoding: "base64" }); // this line
cloudinary.uploader.upload(screenshot, function(error, result) {
    console.log(result, error)
});