how to put a file in state variable with react hooks

Question

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.

Unless picture is an object setPicture(e.target.files[0]) should do it. — Andy
– Andy, Commented Jun 17, 2019 at 10:33
I'm not sure it's an object or not, I set the value with useState(null), but just using setPicture(e.target.files[0]) still gives undefined — akano1
– akano1, Commented Jun 17, 2019 at 10:36
I think that It's due to the value of picture which is null. And do you think that null is iterable? — Radonirina Maminiaina
– Radonirina Maminiaina, Commented Jun 17, 2019 at 10:40
that's right but I changed the value to useState() and setPicture(e.target.files[0]) but I still get the value of picture to be undefined — akano1
– akano1, Commented Jun 17, 2019 at 10:42

GG. · Accepted Answer · 2022-10-05 23:20:02Z

12

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

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

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

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

edited Oct 5, 2022 at 23:20

answered Jun 26, 2021 at 2:09

GG.

22k14 gold badges93 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

apokryfos · Accepted Answer · 2019-06-17 10:45:25Z

10

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

answered Jun 17, 2019 at 10:45

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

3 Comments

akano1 Over a year ago

I get an empty array in the console picture: []

apokryfos Over a year ago

The first time you would because you're printing the console contents on the current state which is initially empty. Do you mean you get an empty array every time you add a file?

akano1 Over a year ago

that's right only the first time I get an empty array and second time I get the correct data

Raman Kishore · Accepted Answer · 2019-06-17 10:51:18Z

7

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

edited Jun 17, 2019 at 10:51

answered Jun 17, 2019 at 10:42

Raman Kishore

5823 silver badges14 bronze badges

2 Comments

Raman Kishore Over a year ago

Can you change console.log line to: console.log('picture: ', e.target.files[0]); and tell the output?

Raman Kishore Over a year ago

Try changing the onChange to what I've written in the answer. I'm guessing the event is not being passed to the function.

Lin Du · Accepted Answer · 2021-07-05 02:32:08Z

0

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.

edited Jul 5, 2021 at 2:32

Lin Du

104k138 gold badges340 silver badges575 bronze badges

answered May 15, 2021 at 19:42

Sourabh

2533 silver badges3 bronze badges

Comments

Mohnish · Accepted Answer · 2020-09-26 06:09:12Z

-2

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

edited Sep 26, 2020 at 6:09

Mohnish

1,0061 gold badge12 silver badges20 bronze badges

answered Sep 26, 2020 at 3:53

vim kndll

191 silver badge6 bronze badges

1 Comment

Amir M. Mohamadi Over a year ago

You need to import useState from react

Collectives™ on Stack Overflow

how to put a file in state variable with react hooks

5 Answers 5

Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related