[Solved]-How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest?-Reactjs

i struggled it a lot and find an efficient way to handle this case.

first- you should mess with the customrequest only when you need to change to body and the request type (like using post instead of 'put' or using xml or add another extra header).

for the signing url you can send in the action prop callback which return a promise with the right url to upload like:

 handleuplaod = (file: any) => {
return new promise(async (resolve, reject) => {
  const filename = `namethatiwant.type`;
  const url = await s3fetcher.getpresignedurl(filename);
  resolve(url);
});

and render like:

render(){
    return(
    ....
    <upload
    action={this.handleuplaod}
    ....
 upload>

the uploader take the url from the action prop.

the onchange method which is provided also will be called any time the status of upload is changed-

onchange# the function will be called when uploading is in progress, completed or failed.

when uploading state change, it returns:

{ file: { /* ... / }, filelist: [ / ... / ], event: { / ... */ }, }

when upload started you will need to activate the file reader from that. like:

....
 filereader = new filereader();
 .....

onchange = (info) => {
    if (!this.filereader.onloadend) {
      this.filereader.onloadend = (obj) => {
        this.setstate({
          image: obj.srcelement.result, //will be used for knowing load is finished.
        });
      };
    // can be any other read function ( any reading function from
    // previously created instance can be used )
    this.filereader.readasarraybuffer(info.file.originfileobj);
    }
  };

notice when completed stage that event=undefind

to update the ui from the upload events you should use the options variables from customrequest and call them whenever you need.

onsuccess- should be called when you finish uploading and it will change the loading icon to the file name.

onerror- will paint the file name filed to red.

onprogress- will update the progress bar and should be called with {percent: [number]} for updating.

for example in my code-

customrequest = async option => {
  const { onsuccess, onerror, file, action, onprogress } = option;
  const url = action;

  await new promise(resolve => this.waituntilimageloaded(resolve)); //in the next section 
  const { image } = this.state; // from onchange function above
  const type = 'image/png';
  axios
    .put(url, image, {
      onuploadprogress: e => {
        onprogress({ percent: (e.loaded / e.total) * 100 });
      },
      headers: {
        'content-type': type,
      },
    })
    .then(respones => {
      /*......*/
      onsuccess(respones.body);
    })
    .catch(err => {
      /*......*/
      onerror(err);
    });
};

 waituntilimageloaded = resolve => {
  settimeout(() => {
    this.state.image
      ? resolve() // from onchange method
      : this.waituntilimageloaded(resolve);
  }, 10);
};

i used axios but you can use other libraries as well and the most important part-

render(){
return(
....
<upload
onchange={this.onchange}
 customrequest={this.customrequest}
...>

i was struggling with that as well and then i found your question.

so the way i found to use customrequest and onchange is:

    <upload name="file" customrequest={this.customrequest} onchange={this.onchange}>
      <button>
        <icon type="upload" /> click to upload
      </button>
    </upload>

  ...


  onchange = (info) => {
    const reader = new filereader();
    reader.onloadend = (obj) => {
      this.imagedataasurl = obj.srcelement.result;
    };
    reader.readasdataurl(info.file.originfileobj);

    ...
  };

  ...

  customrequest = ({ onsuccess, onerror, file }) => {
    const checkinfo = () => {
      settimeout(() => {
        if (!this.imagedataasurl) {
          checkinfo();
        } else {
          this.uploadfile(file)
            .then(() => {
              onsuccess(null, file);
            })
            .catch(() => {
              // call onerror();
            });
        }
      }, 100);
    };

    checkinfo();
  };

there are probably better ways to do it, but i hope that helps you.