HTTP PUT a PNG with Fetch API

Question

I have a Base64 encoded image called imgBase64 .

How can I HTTP PUT this PNG from a browser using the Fetch API?

const response = await fetch(url, {
    method: 'put',
    headers: {
        'Content-Type': 'image/png'
    },
    body: atob(imgBase64) // <--------- what should I be doing here?
});

Answer 1

If the imgBase64 is already encoded, you can add Content-Transfer-Encoding header and remove atob method:

const response = await fetch(url, {
    method: 'put',
    headers: {
        'Content-Type': 'image/png',
        'Content-Transfer-Encoding': 'base64'
    },
    body: imgBase64
});

Answer 2

This is what ended up working for me:

let imageResponse = await fetch(imgBase64); 

const putResponse = await fetch(url, {
    method: 'put',
    headers: {
        'Content-Type': 'image/png',
    },
    body: await imageResponse.blob()
});