Unable to upload React file to aws s3

Hey Everyone please I would need some help on this. I have a small react page where I want to just upload files to aws s3 and my s3 bucket has the Cors configuration and public access There is an error of ‘Failed to upload resource. The server responded with a status of 403 (Forbidden)’. Please, what can I be doing wrong below is the code.


import React from 'react';
import aws from './config/dev';
import './App.css';
import ReactS3 from 'react-s3';



const config = {
  bucketName: '********',
  dirName: '******',
  region: 'eu-west-2',
  accessKeyId: aws.accessKeyId,
  secretAccessKey: aws.secretAccessKey

}

class App extends React. Component {


  uploadFile(e) {
    console.log(e.target.files[0]);
    ReactS3.uploadFile(e.target.files[0], config)
      .then((data) => {
        console.log(data.location);
      })
      .catch((err) => {
        alert(err);
      })
  }

  render() {
    return (
      <div>
        <h3>Upload</h3>
        <input type="file"
          onChange={this.uploadFile} />
      </div>
    )
  }
}


export default App;

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

403 means you’re not authorized to do what you’re trying to do, therefore it’s likely that either your aws config is wrong in some way or the S3 config you have set up is wrong in someway, not possible to tell. Go through the troubleshooting here:

https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/

Yeah I figured studied the article and tried to set my keys right with the permissions how I still get this error ““Access to fetch at ‘https://xxx-xxx-xxx.s3.amazonaws.com/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.>>””

Thanks I fixed it. Had issues with my keys