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.