Reputation: 187
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?
Upvotes: 9
Views: 21252
Reputation: 3112
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.
Upvotes: 22