Failed to fetch when I thy to upload file to S3 use JS Vue

Question

I try to upload file to my s3 bucket use this library https://github.com/Fausto95/aws-s3 and I get this error in the console:

this is code of component:

<template>
  <input type="file" @change="uploadFile(fieldName, $event.target.files)"/>
</template>

<script>
import S3 from 'aws-s3';

export default {
  computed: {
    config() {
      return {
        bucketName: 'in-converter-bucket',
        dirName: '', /* optional */
        region: 'eu-west-2',
        accessKeyId: 'AKIAZSUESKSZVZTI55PV',
        secretAccessKey: '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',
        s3Url: 'https://s3.console.aws.amazon.com/s3/buckets/in-converter-bucket?region=us-west-2&tab=objects', /* optional */
      }
    },
    S3Client() {
      return new S3(this.config);
    }
  },
  methods: {
    uploadFile(fieldName, files) {
      let file = files[0]
      this.S3Client
      .uploadFile(file, '324')
      .then(data => console.log(data))
      .catch(err => console.error(err))
    }
  },
  props: ['fieldName', 'obj']
}

</script>

Any help will be very useful

Thanks for comment, I don't know what is it. I will be reading about it. — Adam
– Adam, Commented Jan 4, 2021 at 12:19
[ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "PUT", "POST", "HEAD", "GET", "DELETE" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [] } ] — Adam
– Adam, Commented Jan 12, 2021 at 12:08

Adam · Accepted Answer · 2021-01-12 15:04:48Z

There were three problems:

First: I didn't add CORS, something like this:

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

Second I didn't add Bucket policy, something like this:

{
"Version": "2012-10-17",
"Id": "http referer policy example",
"Statement": [
    {
        "Sid": "Allow admins to put and delete objects",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::658481773507:user/Admin"
        },
        "Action": [
            "s3:PutObject",
            "s3:PutObjectAcl",
            "s3:GetObject",
            "s3:GetObjectAcl",
            "s3:DeleteObject"
        ],
        "Resource": [
            "arn:aws:s3:::js-bucket",
            "arn:aws:s3:::js-bucket/*"
        ],
        "Condition": {}
    },
    {
        "Sid": "Allow anyone to get objects",
        "Effect": "Allow",
        "Principal": "*",
        "Action": [
            "s3:GetObject",
            "s3:GetObjectAcl"
        ],
        "Resource": [
            "arn:aws:s3:::js-bucket",
            "arn:aws:s3:::js-bucket/*"
        ],
        "Condition": {}
        }
    ]
}

And I mixed up region, I wrote: eu-west-2, but I use: us-west-2;

Vency · Accepted Answer · 2024-06-19 04:20:38Z

0

To anyone still having trouble, adding "Access-Control-Allow-Origin" in "ExposeHeaders" fixed mine. Here's the refernece I used: How do I configure CORS in Amazon S3 and confirm the CORS rules using cURL?

[{
    "AllowedHeaders": [
        "*",
        "Authorization"
    ],
    "AllowedMethods": [
        "HEAD",
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "*",
        "http://localhost:3000",
    ],
    "ExposeHeaders": [
        "Access-Control-Allow-Origin"
    ],
    "MaxAgeSeconds": 3000
}]

edited Jun 19, 2024 at 4:20

answered Jun 19, 2024 at 4:19

Vency

11 bronze badge

Collectives™ on Stack Overflow

Failed to fetch when I thy to upload file to S3 use JS Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related