CODEWITHSUNDEEP
reactjsreact-hooks
Ganesh
Ganesh

Reputation: 7

How to upload/browse and display image on web page using Hooks in react js?

when I browse an image, I want to show this in web page using Hooks in react js ? like this.... sample output

Upvotes: 0

Views: 51

Answers (1)

PR7
PR7

Reputation: 1894

Here is an example with hooks

import { useState } from "react";

export default function App() {
  const [file, setFile] = useState(null);

  const handleChange = (event) => {
    setFile(URL.createObjectURL(event.target.files[0]))
  }

  return (
    <>
      <input type="file" onChange={handleChange}/>
      <img src={file} />
    </>
  );
}

Upvotes: 1

Related Questions