CODEWITHSUNDEEP
javascriptamazon-s3woocommerce
Alien13
Alien13

Reputation: 618

"Unrecognized content encoding type" error when uploading an image

I am trying to fetch images that I have uploaded to my CDN. I used canvas.toDataURL to convert my images to PNGs before upload.

I get the following error when I try to fetch the images: Error: cURL error 61: Unrecognized content encoding type. libcurl understands deflate, gzip, br content encodings

So first I created this image using FabricJS: Then I am exporting it as a PNG using:

const dataURL = canvas.toDataURL({
    width: canvas.width,
    height: canvas.height,
    left: 0,
    top: 0,
    format: 'png'
})

Then I am uploading it to my S3 CDN using:

async function uploadPNG(dataURL, filePath) {
  const buf = Buffer.from(dataURL.replace(/^data:image\/\w+;base64,/, ""),'base64')

  const uploadParams = {
    Bucket: bucketName,
    ContentType: 'image/png',
    ContentEncoding: 'base64',
    Body: buf,
    Key: filePath
  }

  return await s3.upload(uploadParams).promise()
}

Then I am trying to upload that image (which is now in the S3 CDN) to a WooCommerce site using their API. https://s3.eu-central-1.amazonaws.com/cdn.blankt.com/product/s/AY6AJSHMXnf2ReCZOu.png

Here is part of that API request:

{
  "name": "AY6AJSHMXnf2ReCZOu",
  "type": "variable",
  "regular_price": "9.90",
  "sku": "AY6AJSHMXnf2ReCZOu",

  ...

  ],
  "images": [
    {
      "src": "https://s3.eu-central-1.amazonaws.com/cdn.blankt.com/product/s/AY6AJSHMXnf2ReCZOu.png"
    }
  ],
  "attributes" : [
    {
      "name"      : "Size",
      "variation" : true,
      "visible"   : true,
      "options"   : [ "A3", "A4", "A5" ]
    }
  ]
}

And this is the response that I get: enter image description here

This problem seem to only appear when I try to upload the image using the API, if I download and upload the image manually to WooCommerce, there are no problems.

Upvotes: 1

Views: 1485

Answers (1)

Qwerasd
Qwerasd

Reputation: 379

It would seem that you're providing the invalid content encoding in your s3 upload, where you provide the parameter ContentEncoding: 'base64'.

The s3 SDK documentation for the upload method is somewhat unclear in the specifics of handling the ContentEncoding parameter:

ContentEncoding — (String) Specifies what content encodings have been applied to the object and thus what decoding mechanisms must be applied to obtain the media-type referenced by the Content-Type header field.

But my suspicion is that it is simply passed along as the Content-Encoding HTTP header (MDN) when the object is accessed. In which case the image loads fine in your browser because it's smart (or perhaps dumb) enough to discard the encoding that it doesn't recognize, however WooCommerce's backend does not do that, and instead produces an error.

Solution: remove the ContentEncoding from your s3 upload params -- you're not uploading encoded content in the first place, since you decode the base64 data to raw bytes when you pass it to Buffer.from with the 'base64' encoding parameter (See Buffer.from(string[, encoding]) and character encodings in Node.JS docs)

Upvotes: 2

Related Questions