Попередній перегляд зображення після вибору зображення jquery-Приклади коду

$(function () {
  //Отримати поле введення
  var input = $("#imageInput");
  //Приховати поле введення
  input.hide();
  //При натисканні на кнопку перегляду
  $("#browseButton").click(function () {
    //Показати поле введення
    input.show();
    //При виборі користувачем зображення
    input.change(function () {
      //Отримати ім'я файлу зображення
      var fileName = $(this).val();
      //Показати ім'я файлу
      $("#fileName").text(fileName);
      //Попередній перегляд зображення
      var image = $("<img>").attr("src", fileName);
      $("#preview").empty().append(image);
    });
  });
});

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

function PreviewImageUpload() {
  const [image, setImage] = useState('');
  const [preview, setPreview] = useState('');
  const fileInputRef = useRef(null);

  const handleImageChange = (e) => {
    const file = e.target.files[0];

    if (!file) {
      return;
    }

    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => {
      setImage(file);
      setPreview(reader.result);
    };
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Завантажте зображення тут
  };

  const handleClick = () => {
    fileInputRef.current.click();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="file"
        ref={fileInputRef}
        style={{ display: 'none' }}
        onChange={handleImageChange}
      />
      <button type="button" onClick={handleClick}>
        Виберіть зображення
      </button>
      {preview && <img src={preview} alt="Завантажити попередній перегляд" />}
    </form>
  );
}

export default PreviewImageUpload;