Ant design on preview is not getting fired

Question

I have an upload button like this. I want to show preview of uploaded Image on a div. Hence, I want the previewImage. This is how i'm trying to achieve it but onPreview is not getting fired at all.

It's a functional component. Sandbox=> https://codesandbox.io/s/silly-breeze-2gvewe

function AddAttachment(props) {


   const getBase64 = (file)=>{
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    }


    const onChange = ({  fileList: newFileList }) => {
      setFileList(()=>(newFileList));
      console.log(fileList);
    

    };


    const handlePreviewImage = async (file)=>{

   
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
 

      setBase64({
        previewImage: file.url || file.preview,
        previewVisible: true,
        previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
      });
    }

 

return (
<UploadButton
                    fileList={fileList}
                    onPreview ={handlePreviewImage}
                    onChange={onChange}
                    aspect={2} listType="picture" />
)

}

Answer 1

From the docs:

onPreview

A callback function, will be executed when file link or preview icon is clicked.

When you try clicking on the preview image or link, you should see handlePreviewImage get called.