S3 image trans , react

Test.tsx

import React from 'react';
import AWS from 'aws-sdk'

const S3_BUCKET ='bucket-name';
const REGION ='ap-northeast-1';

AWS.config.update({
  accessKeyId: 'key123',
  secretAccessKey: 'key123'
})

const myBucket = new AWS.S3({
  params: { Bucket: S3_BUCKET},
  region: REGION,
})
interface IState {
  progress: number,
}
interface IProps {
}

export default class extends React.Component<IProps, IState> {
  // console.log(data.blogs)
    constructor(props: any){
      super(props)
      this.state = {progress: 0};
  //console.log(props )
    }
    componentDidMount(){
      const self = this;
      window.document.getElementById("file1").addEventListener("change", function() {
        console.log("#change");
        self.uploadFile();
      });    
    }
    uploadFile(){
      console.log("uploadFile");
      const files = document.querySelector<HTMLInputElement>('#file1').files;
      const fileObject = files[0]; 
      if (typeof fileObject === "undefined") {
        console.error("none, fileObject");
        return;
      }
      const params = {
        ACL: 'public-read',
        Body: fileObject,
        Bucket: S3_BUCKET,
        Key: fileObject.name
     };      
      myBucket.putObject(params)
      .on('httpUploadProgress', (evt) => {
        console.log(evt.loaded);
        this.setState({
          progress: Math.round((evt.loaded / evt.total) * 100)
        });
      })
      .send((err) => {
          if (err) console.log(err)
      })      
    }
    clickHandler(){
    }
    render(){
      return (
      <div className="body_main_wrap">
        <div className="container"><h1>File Upload test:</h1>
        <hr />
          file : <br />
          <input type="file" name="file1" id="file1" /><br /><br />
          <hr />
          <div>Native SDK File Upload Progress is {this.state.progress}%</div>
        </div>
      </div>
      )
    }
  }