I am trying to upload a video file from JS to an S3 bucket but am getting a 400 bad request right now. I am sure I set up everything properly but could of done something.

I generate a URL on a server like this:

const client = new S3({
    accessKeyId: 'id-ommited',
    secretAccessKey: 'key-ommited',
    region: 'eu-west-2',
    useAccelerateEndpoint: true
});
const url = client.getSignedUrl('putObject', {
    Bucket:  'screen-capture-uploads',
    Key:     'video.webm',
    Expires: 60 * 60,
    ContentType: 'application/octet-stream'
});

This URL appears to be fine on my frontend which I put through to an XMLHttpRequest like so

const xhr = new XMLHttpRequest();

xhr.open('PUT', body.url); // body.url being the presigned url
xhr.setRequestHeader('x-amz-acl', 'public-read');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(blob); // blob being the webm binary

I am using a CORS setup that just allows PUT from anywhere

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

I checked that and it works fine. Also the IAM user has permission to put to the bucket

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::screen-capture-uploads/*"
            ]
        }
    ]
}

I managed to solve my issues up to this point. I've looked at some other answers but didn't find anything useful for me. Anybody got any ideas for me?

I am trying to upload a video file from JS to an S3 bucket but am getting a 400 bad request right now. I am sure I set up everything properly but could of done something.

I generate a URL on a server like this:

const client = new S3({
    accessKeyId: 'id-ommited',
    secretAccessKey: 'key-ommited',
    region: 'eu-west-2',
    useAccelerateEndpoint: true
});
const url = client.getSignedUrl('putObject', {
    Bucket:  'screen-capture-uploads',
    Key:     'video.webm',
    Expires: 60 * 60,
    ContentType: 'application/octet-stream'
});

This URL appears to be fine on my frontend which I put through to an XMLHttpRequest like so

const xhr = new XMLHttpRequest();

xhr.open('PUT', body.url); // body.url being the presigned url
xhr.setRequestHeader('x-amz-acl', 'public-read');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(blob); // blob being the webm binary

I am using a CORS setup that just allows PUT from anywhere

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws./doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

I checked that and it works fine. Also the IAM user has permission to put to the bucket

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::screen-capture-uploads/*"
            ]
        }
    ]
}

I managed to solve my issues up to this point. I've looked at some other answers but didn't find anything useful for me. Anybody got any ideas for me?

• javascript
• amazon-s3
• browser
• xmlhttprequest
• aws-sdk

• Man, you are god! I just changed the content-type and it worked like a charm – Ganesh Chowdhary Sadanala Commented May 12, 2024 at 2:34

1 Answer 1

I went and got the endpoint it produced and just put it straight in the browser. Turns out I hadn't enabled transfer acceleration on the bucket I was using!

This just turned into a bad request without any extra information