I'm currently able to upload an image to AWS S3 in my React application but am having trouble deleting the image (deleting from the bucket).

When I upload and display the image, the fetch request comes from https://mybucket.s3.amazonaws.com/photos/PhotoNew.jpg

When I try to delete the image, the fetch request is made to https://mybucket.s3-us-east-1.amazonaws.com/photos/PhotoNew.jpg

The image is not being removed from the bucket.

My functions are currently as follows:

// App.js

const config = {
    bucketName: 'mybucket', // name of the bucket
    dirName: 'photos', /* optional */
    region: 'us-east-1',
    accessKeyId: 'xxxxxxxx',
    secretAccessKey: 'xxxxxxxx',
}

class App extends Component {
  constructor() {
    super();
    this.state ={
      url: u,
    }
    this.upload = this.upload.bind(this);
    this.delete = this.delete.bind(this);
  }

  // works correctly
  upload(e) {
    const file = e.target.files[0];
    S3FileUpload.uploadFile(file, config)
      .then(data => this.setState({url: data.location}))
      .catch(err => console.log(err));
  }

  delete(e) {
    const filename = "PhotoNew.jpg";
    S3FileUpload
    .deleteFile(filename, config)
    .then(response => console.log(response))
    .catch(err => console.error(err))
  }


  render() {


    return ( <div>
      Upload AWS S3
      <input 
        type="file"
        onChange={this.upload}
      />
      <button onClick={this.delete}>Delete</button>
      <img src={this.state.url} />
    </div>);
  }
}

UPDATE

CORS config for S3 bucket.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedOrigin>localhost:*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

0 Answers