Using FileReader with React and Typescript

Question

I want to upload json file using input with type file. When I use onload method on fileReder Typescript shows me error - Cannot invoke an object which is possibly 'null'. Thank you.

const UploadCharacter = () => {
    const [data, setData] = useState<any>();

    const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            const fileReader = new FileReader(); 
            fileReader.readAsText(e.target.files[0], 'UTF-8')
            fileReader.onload((e) => {  <-- Error: Cannot invoke an object which is possibly 'null'.
                console.log(e.target.result)
            })
        }


    }
    return (
        <div className={s.upload}>
            <input
                className={s.uploadInput}
                type="file"
                onChange={handleUpload}
            />
        </div>
    )
}

maybe you can refer to this [link](https://stackoverflow.com/questions/43176560/property-files-does-not-exist-on-type-eventtarget-error-in-typescript) — Sean, Jun 28 '22 at 19:31

score 0 · Answer 1 · answered Mar 06 '23 at 17:55

This should work:

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const reader = new FileReader();
      reader.readAsText(e.target.files[0], 'UTF-8');
      reader.onloadend = (readerEvent: ProgressEvent<FileReader>) => {
        if (readerEvent?.target?.result) {
          setPolicy(readerEvent.target.result.toString());
          updatePolicy(readerEvent.target.result.toString());
        }
      };
    }
  };

Using FileReader with React and Typescript

1 Answers1