I am creating this in nextjs(app router). I am trying to get the image from user’s system using input(type as file) and reading the content of the file with FileReader().

  const OnChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    console.log([file, reader, reader.result]);
    reader.onload = () => {
      console.log("hello");
      if (reader.readyState === 2) {
        setAvatarPreview(reader.result);
      }
      setAvatar(file);
      reader.readAsDataURL(file);
    };
    reader.onerror = function (event) {
      console.log("Error reading file:", event.target.error);
    };
  };
// this is jsx
          <form className="mt-4 p-2 flex items-center justify-center border-2 border-black">
            <input
              type="file"
              name="avatar"
              id="avatar"
              onChange={OnChange}
              accept="image/*"
            />
          </form>

#The problem is the onload event listener is not getting fired

#I tried but it won’t read the content of file. Even if i have entered correct type of image(jpg,png) it doesn’t fire the onload or any other kind of event listeners.