Amazon S3 bucket MalformedXML error when uploading

Question

I am trying to upload a picture to my Amazon S3 bucket. Here is the code for my XMLHttpRequest:

var form_data = new FormData();
form_data.append(filename, file);
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'https://bucket-name.s3.amazonaws.com', true);
xhr.send(form_data);

I have configured the CORS to be as follows:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

Unfortunately, I keep getting the following error when I attempt to upload to it:

PUT https://bucket-name.s3.amazonaws.com 400 (Bad Request)
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>MalformedXML</Code><Message>The XML you provided was not well-formed or 
did not validate against our published schema</Message><RequestId>6188AA51D1EE6B38</RequestId>
<HostId>f3d5Aj8bMyMOJywRnYKH/tBXRHCDWFvNzcb4ejs9F4/IulP1P2n0XoN1mDq7LpQgL/RIsW1c6RA=</HostId></Error>

Does anyone know what I am doing wrong?

Answer 1

It looks like you're sending the PUT request to the bucket itself, without an object name. S3 interprets this as a PUT BUCKET request, and expects the body to be a CreateBucketConfiguration XML document.

To upload a file, your XHR open call should look more like:

xhr.open('PUT', 'https://bucket-name.s3.amazonaws.com/' + filename, true);

There's an example request in the documentation.