使用Uppy将文件从ReactJs上传到PHP服务器（Yii2）

Question

I have a Form in ReactJs and I want to submit both data and files to my php API ( Yii2) endpoint. (I do not want to use the raw Input file upload form as I want to have functions like file preview, cropping and most importantly progress bar on file upload)

After doing some research, I came across Uppy which seems to be a great tool to help in this task. I have been going through the docs and other materials for a few days now.

I have written a function to upload files using uppy file uploader following tutorials such as https://uppy.io/docs/react/. My function is very buggy as

1. I do not even see thumbnails generated from files uploaded, I do not see any information on my DragDrop Component.

2. I am not able to upload the files to my Yii2 API endpoint. I get the error Reason:

CORS header ‘Access-Control-Allow-Origin’ missing with results such as: Object { successful: [], failed: (1) […], uploadID: "cjs3mua0g0001245zctq3nbqa" }

Here is my code for the uppy function

AvatarPicker(currentAvatar ){
  const {user} = this.props
  const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
             username: user.username
        })
    };

  const uppy = Uppy({ autoProceed: true })
      .use(Dashboard, { trigger: '#select-files' })
      .use(GoogleDrive, { target: Dashboard, serverUrl: apiConstants.API_GENERAL_URL+'changeprofilepic' })
      .use(Instagram, { target: Dashboard, serverUrl: apiConstants.API_GENERAL_URL+'changeprofilepic' })
      .use(Webcam, { target: Dashboard })
      .use(Tus, { endpoint:  apiConstants.API_GENERAL_URL+'changeprofilepic?access-token='+user.username, requestOptions })
      .on('complete', (result) => {
        console.log('Upload result:', result)
      })

return (
  <div>
    <img src={currentAvatar} alt="Current Avatar" />
    <DragDrop
      uppy={uppy}
      locale={{
        strings: {
          // Text to show on the droppable area.
          // `%{browse}` is replaced with a link that opens the system file selection dialog.
          dropHereOr: 'Drop here or %{browse}',
          // Used as the label for the link that opens the system file selection dialog.
          browse: 'browse'
        }
      }}
    />
  </div>
)

And in my component render function, I call the AvatarPicker class as show

{
   this.AvatarPicker('./../images/master.png')
}

Any heads up on this issue, propose solutions, fixes or new Ideas to get around my task is highly appreciated.