Trigger open dialog from external button Ant Design Upload Dragger

Question

I had this custom upload component. I wanted to trigger the openDialog ant Design upload from another external button but everytime I click the button the console has an error message that has **Uncaught TypeError: _dialogRef$current.click is not a function ** below is the my code.

 import { Modal, Upload, UploadProps, UploadFile, message } from "antd";


const CustomUpload = () => {
 const dialogRef= useRef() 
 const {Dragger} = Upload;
 
  const browseHandler = () => {
   dialog.current.click()
    };
return (

  <Dragger {...props} ref={dialogRef}>
              <VStack padding={"56px"}>
                <HStack
                  alignItems="center"
                  justifyContent="center"
                  marginBottom={"24px"}
                >
                  <SvgIcon id="upload" size={8} />
                  <VStack justifyContent="flex-start">
                    <Text type="body1">Drag and drop your files here</Text>
                    <Text type="caption">File supported: XLSX only.</Text>
                  </VStack>
                </HStack>
                <Button
                  label="BROWSE FILES"
                  variant="primary"
                  onPress={browseHandler}
                />
              </VStack>
            </Dragger>
 )}

export default CustomUpload;

Answer 1

If you're using typescript this will give you an intellisense error but it works:

const browseHandler = () => {
  dialogRef.current?.upload.uploader.fileInput.click()
}

Here you can find a working codesandbox example.

Hope this helps :)