How to take image form the file and save in local storage and get form there ...

<h1> Input and Save Image </h1>

import React, { useEffect, useState } from 'react';

function Auth() {

  const [file, setFile] = useState(null);

  useEffect(() => {

    // Load the image from localStorage on page load

    const storedFile = localStorage.getItem('file');

    if (storedFile) {

      setFile(storedFile);

    }

  }, []);

  function handleChange(e) {

    const selectedFile = e.target.files[0];

    if (selectedFile) {

      const reader = new FileReader();

      reader.onloadend = () => {

        // Convert image to base64 and store in localStorage

        localStorage.setItem('file', reader.result);

        setFile(reader.result);

      };

      reader.readAsDataURL(selectedFile);

    }

  }

  return (

    <div className="App">

      <h2>Add Image:</h2>

      <input type="file" onChange={handleChange} />

      {file && <img src={file} alt="Preview" style={{ width: '200px', marginTop: '10px' }} />}

    </div>

  );

}

export default Auth;