AWS S3 upload via presigned url returns 400 bad request

Question

I'm trying to upload a file to AWS s3 by issuing a PUT request to the pre-signed URL. I have configured CORS on the s3 dashboard.

React code

  const submit = async () => {
    const response = await axios.get("http://localhost:8080/api/upload");
    console.log(response.data);
    const upload = await axios.put(response.data.url, file, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": file.type
      }
    });
  };

Node.js code

const s3 = new AWS.S3({
  accessKeyId: config.aws.accessKeyId,
  secretAccessKey: config.aws.secretAccessKey
});
app.get("/api/upload", (req, res) => {
  const key = `${uuid()}.jpeg`;
  s3.getSignedUrl(
    "putObject",
    {
      Bucket: "bucket-name",
      ContentType: "image/jpeg",
      Key: key
    },
    (err, url) => {
      res.status(200).json({ key, url });
    }
  );
});

When I try to make PUT request to the pre-signed URL I get the next error:

PUT https://bucket-name.s3.amazonaws.com/dd7eb480-9115-11e9-bb14-75395bf4d226?AWSAccessKeyId=AKIAZPROFMOUP5TZZOIM&Content-Type=%2A&Expires=1560786770&Signature=c2ap3CcLKj%2FUD8yHtiHTNTnWJT4%3D 400 (Bad Request) createError.js:17 Uncaught (in promise) Error: Request failed with status code 400 at createError (createError.js:17) at settle (settle.js:19) at XMLHttpRequest.handleLoad (xhr.js:60)

400 Bad Request has several causes. You'll need to capture the accompanying response body for an explanation. — Michael - sqlbot
As @Michael-sqlbot pointed out, looking at the response body did the trick. I was getting an "AuthorizationQueryParametersError". — Pablo Anaya

high_breed high_breed · Accepted Answer · 2019-11-14T00:40:52

The way to create s3 instance replace region with the region of your bucket:

AWS.config.update({region: 'REGION'});

const s3 = new AWS.S3({
  apiVersion: '2006-03-01',
  accessKeyId: keys.accessKeyId,
  secretAccessKey: keys.secretAccessKey
});

AWS S3 upload via presigned url returns 400 bad request

1 Answers