Shopify Question posted in
The Shopify help center can be found here.

Axios multipart/form-data request return as "request is not well-formed multipart/form-data" – Shopify

I want to use Shopify api. And I want to upload video with this API. So official document like that:

https://shopify.dev/api/examples/product-media#videos-3d-models-post-request

So, I created an axios config and I tried to send request.
My code snipped like that:

        let fd = new FormData();
        fd.append("bucket", bucket);
        fd.append("key", key);
        fd.append("policy", policy);
        fd.append("cache-control", cacheControl);
        fd.append("x-amz-signature", xAmzSignature);
        fd.append("x-amz-algorithm", xAmzAlgorithm);
        fd.append("x-amz-date", xAmzDate);
        fd.append("file", fs.createReadStream('./milk.mp4'));


        const config: AxiosRequestConfig = {
            url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
            data: fd,
            method: "POST",
            headers: { "Content-Type": "multipart/form-data" }
        }

        try {
            const videoPost = await axios(config);
        }
        catch (err) {
            console.log(err)
        }

So, I getting an error like that:

   ....
   ....
   [Symbol(kOutHeaders)]: [Object: null prototype]
    },
    data: '<?xml version="1.0" encoding="UTF-8"?>n' +
      '<Error><Code>MalformedPOSTRequest</Code><Message>The body of your POST request is not well-formed multipart/form-data.</Message><RequestId>184VT99AXG4J6FWW</RequestId><HostId>1IBK7dCgApORGZnaGxS/n22Ftgw0fRBW1EnMuhFpEPek5R3iwsa2T9MH2q8A31l1AU9lhAb2WYA=</HostId></Error>'
  },
  isAxiosError: true,
  toJSON: [Function: toJSON]
}

Why Im getting this error? How can I solve this? Please Help

Tags:

2

Answers


  1. 0

    As the documentation says, there are two versions for the formdata syntax.

    Change the code as mentioned below:

    fd.append("file", fs.createReadStream('./milk.mp4'));

...

const config: AxiosRequestConfig = {
    url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
    data: fd,
    method: "POST",
    headers: { "Content-Type": "multipart/form-data" }
}

    to

    fd.append("file", fs.createReadStream('./milk.mp4'), {filename: 'milk.mp4'});

...

const config: AxiosRequestConfig = {
    url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
    data: fd,
    method: "POST",
    headers: fd.getHeaders()
}
    Login or Signup to reply.
  2. 0

    Here is the Solution

    const config: AxiosRequestConfig = {
            url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
            data: fd,
            method: "POST",
            headers: { ...fd.getHeaders() }  // <-- This is the Fix.
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search