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() {
    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";
    .deleteFile(filename, config)
    .then(response => console.log(response))
    .catch(err => console.error(err))

  render() {

    return ( <div>
      Upload AWS S3
      <button onClick={this.delete}>Delete</button>
      <img src={this.state.url} />


CORS config for S3 bucket.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

0 Answers