CODEWITHSUNDEEP
reactjsimagelocal-storageblobfilereader
khatia
khatia

Reputation: 31

how to upload and save image to local storage in react js?

I want to upload image and save it in local stage,in react js, but it works after first rerender, when I upload image it is not shown before refresh

    const App = () => {
    const [url, setUrl] =useState('');
        const uploader = (file) =>{
        const reader = new FileReader();
        reader.addEventListener('load', ()=>{
            localStorage.setItem('recent-image',reader.result)
        })
        reader.readAsDataURL(file);
    }
    useEffect(() => {
        setUrl(localStorage.getItem('recent-image'));
    }, [])
    return ( 
        <div>
            
            <img src ={url}/>
        </div>
     );
   }

Upvotes: 3

Views: 5648

Answers (1)

esinator
esinator

Reputation: 76

Try adding "setUrl(localStorage.getItem('recent-image'));" to the logic in your event listener callback. React re-renders components when state is updated, so you need to change state to see the newly uploaded image.

reader.addEventListener('load', ()=>{
        localStorage.setItem('recent-image',reader.result)
        setUrl(localStorage.getItem('recent-image'));
})

Upvotes: 1

Related Questions