upload File in React / Typescript -> Property 'click' does not exist on type 'neve-CodePudding

i am trying to upload a file in React / Typescript.

const CSVImport = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const inputFile = useRef(null);

  const onButtonClick = () => {
    // `current` points to the mounted file input element
    inputFile.current && inputFile.current.click();
  };

  return (
    <>
      <Button onClick={onButtonClick}>import CSV</Button>
      <input
        type="file"
        id="file"
        ref={inputFile}
        style={{ display: "none" }}
      />
    </>
  );
};

Problem is, that there is something wrong with inputFile.current.click() -> this is the error:

Property 'click' does not exist on type 'never'.

where do i need to set types?

thank you so much!!

CodePudding user response：

Perhaps you can pass a type to useRef:

const inputFile = useRef<HTMLInputElement>(null);

CodePudding user response：

Here is a link explaining as to why there is an error.

You should define the referenced element type. Since you are using input, pass HTMLInputElement type in your useRef. Like this const inputFile = useRef<HTMLInputElement>(null);.