Sunday, 18 March 2018

Customize the AJAX request for Ant Design Component (React JS)

If you want to implement your own upload AJAX handler for the React Ant Design Library Upload or Dragger components then the docs may not be much help. The missing details are below:

  
class UploadFile extends React.Component {

  render() {
    const draggerProps = {
      name: "file",
      multiple: false,
      showUploadList: false,
      customRequest: ({onSuccess, onError, file}) => {
        fetch('/upload', {
          method: 'POST',
          ...
          success: (resp) => {
            onSuccess()
          },
          failure: (err) => {
            onError()
          }
        )
      }
    }

    return (
        <Upload.Dragger {...draggerProps}>
          <p classname="ant-upload-drag-icon">
            <Icon type="cloud-upload"/>
             Drag & Drop a file           
          </p>
        </Upload.Dragger>
    )
  }
}

You just need to implement a customRequest function that accepts an object containing two callback functions: onSuccess, onError and the file to be uploaded. You just need to do whatever custom upload stuff you have to do in this function and then call either onSuccess() or onError() as appropriate when you get your response back. You don't have to pass any parameters to these functions

1 comment:

Anonymous said...

Thanks that was helpful!
I used it to get cookies passed through CORS.
Maybe there is another way, but the custom request worked
for me and your example helped me to get it to work.