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

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!!

reactjstypescriptbutton


Solution 1:[1]

Perhaps you can pass a type to useRef:

const inputFile = useRef<HTMLInputElement>(null);

Solution 2:[2]

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);.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sandro
Solution 2

Related Questions