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

2 comments:

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.

Solar Panel Installers Birmingham said...

Solar based energy has changed the force business and for valid justifications. First of all, it gives perfect, environmentally friendly power that can be utilized for different purposes, including controlling homes, warming water, driving vehicles, and the sky is the limit from there. Sun based force is outfit from the sun, which we can't run out of dissimilar to different wellsprings of energy like gaseous petrol, oil, and coal. Besides, these petroleum derivatives radiate carbon impression that influences water, soil, and air quality, and are liable for environmental change.

You'll additionally encounter huge reserve funds with sun based energy. The expense of sun oriented boards has dropped essentially as of late, and with no dropping parts to separate, you will likewise save money on support. Since you will produce power, your energy costs will drop. The amount you save money on your flow power bills will rely upon the size of your close planetary system, its energy effectiveness rate, and your energy utilization needs.


Phone: +441218271200

business email: info@solarpanelinstallers.co.uk

Website: https://www.solarpanelinstallers.co.uk/