how to put a file in state variable with react hooks

user_149738 0
Viewed 14881

I'm trying to upload a picture using react hooks

const [picture, setPicture] = useState();

const onChangePicture = e => {
    console.log('picture: ', picture);
    setPicture(...picture, e.target.files[0]);
};

<input
  type="file"
  //style={{ display: 'none' }}
  onChange={e => onChangePicture(e)}
/>

however I'm getting the following error:

Uncaught TypeError: picture is not iterable

when I change the onChangePicture to 

setPicture(picture, e.target.files[0])

the picture variable is undefined,

any help would be appreciated.

reactjs ecmascript-6 javascript
5 Answers

I think you meant to do:

setPicture([...picture, e.target.files[0]]);

This will concatenate the first file to all current files.

Remember to use const [picture, setPicture] = useState([]); as to make sure it doesn't break the first time around

user_4878130

You can pass the value directly into setPicture function to set the state variable picture.

Try:

const [picture, setPicture] = useState(null);

const onChangePicture = e => {
    console.log('picture: ', picture);
    setPicture(e.target.files[0]);
};

<input
  type="file"
  //style={{ display: 'none' }}
  onChange={onChangePicture}
/>
user_103454610

For anybody arriving here looking for how to do it with TypeScript:

const [file, setFile] = useState<File>();

const onChange = (event: React.FormEvent) => {
    const files = (e.target as HTMLInputElement).files

    if (files && files.length > 0) {
        setFile(files[0])
    }
}
user_6526690

onChange = {(e) => this.onChangePicture(e)} can only be written when you made the states as

states = {
         image,
         name
    }

but when using useState()

you need to use

const [image, setImage] = useState("");

onChange = {(e) => setImage(e.target.files[0])}

I hope this solves the error.

user_126899870

I finally fix this issue:

Problem is here

const [picture, setPicture] = useState(null); //Incorrect

You can use this

const [picture, setPicture] = React.useState(""); //Correct

This can fix this issue

user_143319280
Related