26

The error I get is Property 'files' does not exist on type 'ChangeEvent<HTMLInputElement> Why cant I access the files array from the file input?

Is this a case where useRef is ok to use?

import React from 'react';
const Photo: React.FC = () => {

  const [state, setState] = useState({
    photo: '',
  });

  const {
    photo,
  } = state;

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
'ChangeEvent<HTMLInputElement>
    event.persist();
    setState((prev) => ({
      ...prev,
      [event.target.id]: event.target.value,
    }));
    console.log(state.photo) // returns nothing
    console.log(event.files[0]);
//                      ^
//                      Property 'files' does not exist on type 
  };

  return (
    <div className='photo'>
      <label>
        Click Me
        <input
          type='file'
          id='photo'
          name='photo'
          accept='image/png, image/jpeg'
          onChange={onChange}
          value={photo}
        ></input>
      </label>
    </div>
  );
};

0

4 Answers 4

45

files is property of an input (HTMLInputElement) and not of the event.

So it should be event.currentTarget.files

9

I use this way to add files

const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  const files = (e.target as HTMLInputElement).files;

  if (files) {
    setFormData((prevState) => ({
      ...prevState,
      images: files,
    }));
  }
};
1
  • Please format your code before posting it. Commented Apr 6, 2023 at 6:38
3
    console.log(state.photo) // returns nothing

This returns nothing because when you set state its value is available on the next render cycle. So if you select another file with your file input, then, console.log(state.photo) will log the previous file name.

If you want to log the current selected file, use:

    console.log(event.target.value)

Take a look at my example: https://codesandbox.io/s/pensive-cdn-1fnuv

And

    console.log(event.files[0]);

will throw error. Don't use it.

2
  • 1
    the result is C:\fakepath\Screenshot 2019-12-06 at 12.11.29 PM.png im expecting an object like File {name: "Screenshot 2019-12-08 at 12.12.08 AM.png", lastModified: 1575735133974, lastModifiedDate: Sun Dec 08 2019 00:12:13 GMT+0800 (China Standard Time), webkitRelativePath: "", size: 95373, …}
    – Bill
    Commented Dec 8, 2019 at 7:18
  • Use console.log('Current file: ' + JSON.stringify({ name: event.target.files[0].name, lastModified: event.target.files[0].lastModified, size: event.target.files[0].size }))
    – Emech
    Commented Dec 8, 2019 at 7:40
1
const [file, setFile] = useState<File | null>(null);
const handleChangeFile = (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.currentTarget.files
    if (files)
        setFile(files[0])
}
<input
  type={'file'}
  multiple={false}
  accept="application/pdf"
  onChange={handleChangeFile}
   />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.