I'm trying to upload a file from my react app to my s3 bucket but unfortunately, I'm unable to achieve it, I might be doing something wrong with my permissions of account and s3 bucket, even though my user and user group have AdministratorAccess. My bucket is public as well. I have attached my react code with s3 bucket policies as well.

const config = {
    bucketName: BUCKET_NAME,
    dirName: BUCKET_DIR,
    region: BUCKET_REGION,
    accessKeyId: BUCKET_ACCESS_KEY,
    secretAccessKey: BUCKET_SECRET_KEY,
};

const ReactS3Client = new S3(config);

ReactS3Client.uploadFile(file, 'test')
            .then((data) => console.log('Data:', data))
            .catch((err) => {
                console.log('err => ', err);
            });

s3 bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PolicyForAllowUploadWithACL",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::bucket-name",
                "arn:aws:s3:::bucket-name/*"
            ],
            "Condition": {}
        },
        {
            "Sid": "Allow anyone to get objects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::bucket-name",
                "arn:aws:s3:::bucket-name/*"
            ],
            "Condition": {}
        }
    ]
}

CORS enabled:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "HEAD",
            "GET",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]