CODEWITHSUNDEEP
reactjstypescript
Bill
Bill

Reputation: 5150

React Typescript: Get files from file input

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

Upvotes: 28

Views: 87694

Answers (4)

Hamid Mohamadi
Hamid Mohamadi

Reputation: 179

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}
   />

Upvotes: 2

Mahfod
Mahfod

Reputation: 315

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,
    }));
  }
};

Upvotes: 10

Emech
Emech

Reputation: 631

    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.

Upvotes: 3

Aleksey L.
Aleksey L.

Reputation: 38046

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

So it should be event.currentTarget.files

Upvotes: 48

Related Questions