html - Trying to preview image before uploading

Question

I'm trying to render an image that is being picked by a user with a file type input on the page, so the user will preview the image right before he submits and uploads it, but I can't get its value.

What I been trying to do is using the input's value as a source for the <img /> component:

import React, { useState } from "react";

export default function Test() {
  const [image, setImage] = useState(null);
  return (
    <div>
   <form  onSubmit={() => {
      //Sumbit
    }}/>
    <input
      type="file"
      onChange={(e) => setImage(e.target.value)}
    ></input>
    {image ? <img src={image} /> : null}
    <button type={"submit"}></button>
  </form>
    </div>
  );
}

But it always returns a value - C:fakepathIMGName. Is there any way to get the image's value so I could render it as an image?

question from:https://stackoverflow.com/questions/65903270/trying-to-preview-image-before-uploading

Answer 1

export default function App() {
  const [img, setImg] = useState(null);

  const handleImg = (e) => {
    setImg(URL.createObjectURL(e.target.files[0]));
  }

  return (
    <div className="App">
      <input type="file" onChange={handleImg} />
      <img src={img}/> 
    </div>
  );
}