React + ANTd + Axios

import React from 'react'
import { Modal, Button, Upload, message } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios'

export default class UploadSeatChat extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      fileList: [].uploading: false,
    }
  }

  beforeUpload = (file) = >{
    console.log('file.type', file)
     // The format in which uploads are allowed
    let fileType = ['.png'.'.jpg'.'.jpeg'.'.PNG'.'.JPG'.'.JPEG'.'.pdf'.'.PDF']
    let hasNeedFileType = fileType.filter(item= > file.name.includes(item))
    if(! hasNeedFileType.length) { message.error('JPG/PNG/PDF only! ');
    }
    let isLt1M = file.size / 1024 / 1024 < 1;
    if(! isLt1M) { message.error('Files must be less than 1M');
    }
    let eligibleImage = hasNeedFileType.length && isLt1M
    let newFileList  = eligibleImage ? [...this.state.fileList, file] : [...this.state.fileList]
    this.setState({
      fileList: newFileList
    })
    return false
  }

  handleUpload = async() = > {const { fileList } = this.state;
    if(! fileList.length)return
    // Upload file to s3 without formData
    // Also, axios uses formData, so you can't set the content-type manually. The default is 'multipart/form-data', which will be overwritten if set manually
    this.setState({
      uploading: true});let { data: {url: uploadUrl}} =  await xxx.getUploadSeatChatUrl() // get the S3 address
    let options = {
      headers: {
        'Content-Type': fileList[0].type
      }
    };
    console.log('fileList', fileList)
    console.log('options', options)
    new Promise(resove= > {
      axios.put(uploadUrl, fileList[0], options);
      resove()
    }).then(() = >{
      message.success('Seating plan uploaded successfully');
      this.handleClose()
      this.props.onConfirmUploadSeatChatModal()
    })
  }

  handleClose = () = > {
    this.setState({
      fileList: [].uploading: false,
    })
  }

  handleCancel=() = >{
    this.handleClose()
    this.props.onCloseUploadSeatChatModal()
  }

  render() {
    const { uploading, fileList } = this.state
    const params = {
      onRemove: file= > {
        this.setState(state= > {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
            uploading: false}; }); }, fileList, };return (
      <Modal
        okText="Confirm"
        cancelText="Cancel"
        title="Student seating plan upload"
        onOk={this.handleUpload}
        onCancel={this.handleCancel}
        okButtonProps={{ disabled: !fileList.length }}
        confirmLoading={uploading}
        width="620px"
      >
        <div>
          <Upload
            {. params}
            beforeUpload={this.beforeUpload}
          >
            <Button disabled={fileList.length>= 1} ><UploadOutlined />Upload a seating plan</Button>
          </Upload>
        </div>
      </Modal>)}}Copy the code