ReactJS simple image upload buffer displays null

Question

Inside a component, I have an input field for an image like so:

function AFunction () {

    const [imageTitle, setImageTitle] = useState("")
    const [buffer, setBuffer] = useState(null)

    // for file (does not work)
    <input type='file' accept=".png, .jpg, .jpeg" onChange={(event) => {
                    event.preventDefault()
                    const file = event.target.files[0]
                    const reader = new window.FileReader()
                    reader.readAsArrayBuffer(file)
                
                    reader.onloadend = () => {
                        setBuffer(Buffer(reader.result))
                        console.log('buffer', buffer)
                    }
    }} />

    // for title (works)
    <input id="imageTitle" type="text" value={imageTitle} onChange={e => setImageTitle(e.target.value)} />

}

This code gets the title correctly, but displays the buffer as null

Full behaviour:

Upload image from file...
Image gets uploaded
console.log displays null
further debugging proves title is known after a change in input field

I tried altering the useState parameter with "", also does not work.

Konstantin Samarin · Accepted Answer · 2021-01-25 15:49:01Z

1

setState in React is asynchronous, therefore you console log the previous state.

answered Jan 25, 2021 at 15:49

Konstantin Samarin

8677 silver badges10 bronze badges

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

1 Comment

Eric Over a year ago

Thanks! I knew setState was async, but somehow had no idea a useState binding function was also async... Even though it does the same thing, the connection just wasn't there in my head. Cheers

Collectives™ on Stack Overflow

ReactJS simple image upload buffer displays null

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related