Store an image in browser storage using input type 'file' - Reactjs

Question

I'm trying to store an image in the browser storage when the user selects an image from his/her computer.

<div className="add_grp_image_div margin_bottom">
     <img src={img_upload} className="add_grp_image"/>
     <input type="file" className="filetype"/>
     <span className="small_font to_middle">Add group image</span>
</div>

As shown in the above code i'm opening the file upload window when someone clicks on this div. I want to show the selected image inside the div i have given above. How can i do it?

My html part looks like this.

Answer 1

You don't need to store the image for showing it to the user or manipulating it.

To show the image, make use of FileReader api. This answer should show you how to display the selected image

To manipulate the image, you need to draw it on a canvas and then perform the selected actions. To draw on the canvas you can follow as described here

But if you wanna to crop it, i suggest you to search for a good javascript image manipulation library. There are n libraries that already does this. It saves time and you can learn much faster without re-inventing the wheel.