'e.target.files' is possibly 'null'

Question

In my input component I extract file content after input. Took code from here

Error occurred on the line of onChange={e => handleFileChosen(e.target.files[0])}, to be more accurate, ts underlines e.target.files.

Error message is 'e.target.files' is possibly 'null'

And here is the code:

import styles from './Input.module.scss'
import { FileInputProps } from './FileInput.props';
import cn from 'classnames'
import { useState } from 'react';

export const FileInput = ({ ...props }: FileInputProps): JSX.Element => {
      const [fileContent, setFileContent] = useState<string>('')

      const handleFileChosen = (file: File) => {
            let fileReader = new FileReader()
            fileReader.onloadend = (e: Event) => {
                  const content = fileReader.result || ''
                  setFileContent(content.toString())
            }
            fileReader.readAsText(file)
      }

      return (
            <>
                  <input
                        type='file'
                        onChange={(e) => {handleFileChosen(e.target.files[0])}}
                  />
                  <p>{fileContent}</p>
            </>
      )
}

I've checked this SO page, but none of those solutions helped me

Can you reproduce the error in the code sandbox? as I'm not able to reproduce the error with your code — Ronak, Jan 25 '23 at 15:26
Didn't [this answer](https://stackoverflow.com/a/61750419/893780) provide you with a solution that you can apply to your code? — robertklep, Jan 25 '23 at 15:32

score 1 · Answer 1 · answered Jan 25 '23 at 15:54

Please review this code

import React, {ChangeEvent, useEffect, useState} from 'react';

const FileUploadComponent = () => {
    const [base64Data, setBase64Data] = useState("");
    const [error, setError] = useState("");

    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
        const files: FileList | null = e.target.files;
        const reader: FileReader = new FileReader();
        reader.onloadend = function () {
            setBase64Data(reader.result as string)
        }
        reader.onerror = function () {
            setError("Error file not reading");
        }
        reader.readAsDataURL(files?.[0] as File);
    }

    useEffect(()=> {
        console.log(base64Data)
    }, [base64Data])

    return (
        <div>
            <input
                className={"form-control"}
                type={"file"}
                onChange={handleFileChange}
            />
        </div>
    );
};

export default FileUploadComponent;

'e.target.files' is possibly 'null'

1 Answers1

Please review this code