CODEWITHSUNDEEP
reactjseventsreact-reduxevent-handlingantd
Iangyl
Iangyl

Reputation: 79

React, ANTD: onChange called twice

ANTD Upload.Dragger called twice onChange function. I have no idea what should I do, because I tried many variants what I thought can help.

<Item
                    name='mainImage'
                    rules={getRule('Main Image', 'mainImage')}
                  >
                    <Dragger
                      accept='image/png, image/jpeg, image/svg, image/gif'
                      customRequest={onSuccess}
                      onChange={onFileChanged}
                      style={stylesDragger}
                      maxCount={1}
                    >
                      <div className='ant-upload-drag-icon'>
                        <CloudUploadOutlined size={20} />
                      </div>
                      <div className='ant-upload-text'><span>Click to upload</span> or drag and drop</div>
                      <div className='ant-upload-hint'>
                        SVG, PNG, JPG or GIF (max. 800x400px)<br /><br />Max 1 image
                      </div>
                    </Dragger>
                  </Item>

Here is handler func:

 const onFileChanged = async image => {
    if (isDenied(image?.type)) {
      return onNotifyDenied()
    }
    await dispatch(uploadAttachment(image.file))
  }

enter image description here

Upvotes: 0

Views: 2811

Answers (1)

Iangyl
Iangyl

Reputation: 79

This behavior is explained by working beforeUpload function.
The function has a description in Uploader API. Here it is:

Hook function which will be executed before uploading. Uploading will be stopped with false or a rejected Promise returned. When returned value is Upload.LIST_IGNORE, the list of files that have been uploaded will ignore it. Warning：this function is not supported in IE9

According to this explanation, we should prevent beforeUpload behavior by passing false statement to component.

const beforeUpload = (file, fileList) => {
    // Access file content here and do something with it
    // console.log(file)

    // Prevent upload
    return false
  }

<Dragger
  accept='image/png, image/jpeg, image/svg, image/gif'
  beforeUpload={beforeUpload}
  onChange={onFileChanged}
  customRequest={onSuccess}
  style={stylesDragger}
  multiple={false}
  maxCount={1}
 >
  {...children}
 </Dragger>

Upvotes: 1

Related Questions