I've been struggling with this for a while, but let me explain the context first.

I'm developing a very simple 'Product customizer' using vanilla Javascript for a Shopify merchant.

You can check it here

The customer uploads an image, the image is rendered in the HTML canvas and then placed where desired.

I need to send the Canvas resulting image to the merchant.

I tried appending a canvas blob to the Shopify form like this

let dataURI = canvas.toDataURL();
let blob = dataURItoBlob(dataURI);
let formData = document.querySelector('#shopify-form');
formData.append('file', blob);

And nothing...

So I tried using Cloudinary client-side upload API following this YouTube tutorial.

and I came up with this, sending the request with axios:

addToCartBtn.addEventListener('click', function (e) {
    // e.preventDefault();
    dataURI = canvas.toDataURL();
    let blob = dataURItoBlob(dataURI);
    let formData = new FormData();
    formData.append('file', blob);
    formData.append('upload_preset', cloudinaryConfig.preset)

    axios({
        url: cloudinaryConfig.api,
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function (res) {
        console.log(res);
    }).catch(function (err) {
        console.error(err);
    })
})

So when the customer clicks the Add To Cart button, the canvas image can be uploaded to Cloudinary.

But it results in a 400 - Bad request, clearly I'm messing up somewhere. Please help.

In summary, I need help with either sending the Canvas Image through a shopify order o uploading it to Cloudinary (or any other media manager).

Thanks in advance.