HTTP put request error when trying to upload images to aws S3 using React and Express

Question

I'm trying to upload an image to aws s3 using React and express. my React code is,

axios
 .put(putUrl, file[0], options)
 .then(() => {
          console.log("hello world");
 })
 .catch(err => {
          console.log(err);
 })

this put Url was generated by express using this code before calling above code. And the file is the added files array,

generatePutUrl(Key, ContentType).then(putUrl => {
        res.send({putUrl});
        console.log({putUrl});
    }).catch(err => {
        res.send(err);
    });

options have this,

const options = {
            params: {
                Key: key,
                ContentType: contentType
            },
            headers: {
                'Content-Type':contentType
            }
        };

this key(ex: "example.png") have the image name and contentType is image type (ex: "image/png"). When I am trying to upload an image, it shows those two error messages and the image was not uploaded to S3 bucket.

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)


PUT <generatedUrl> net::ERR_NAME_NOT_RESOLVED

thisis the value of generated S3 url. when I am getting the generated URL from express server it's get request is working fine. but put request shows this erros. what could be the error?

Answer 1

I have updated the bucket policy like this. I've added "s3:PutObject" then the error was gone.

{
    "Version": "2012-10-17",
    "Id": "Policy1624878606419",
    "Statement": [
        {
            "Sid": "Stmt1624878601700",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}