1

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:\fakepath\IMGName. Is there any way to get the image's value so I could render it as an image?

SahiBalata
  • 313
  • 2
  • 5
  • 13
  • Does this answer your question? [Get image preview before uploading in React](https://stackoverflow.com/questions/38049966/get-image-preview-before-uploading-in-react) – jlew Jan 26 '21 at 15:39
  • @jlew actually I found this solution online but Rahul's seems to be easier. – SahiBalata Jan 26 '21 at 18:52

1 Answers1

6
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>
  );
}
Rahul
  • 405
  • 1
  • 4
  • 15