Как загрузить изображение не используя input[type=file]?

Рейтинг: 0Ответов: 1Опубликовано: 12.02.2023

Дана следующая разметка:

<div class="edit-item-image">
   <div class="edit-item-image__image-wrap">
   <!-- Тут должен появится предпросмотр изображения (тег <img>) перед отправкой данных формы на сервер -->
   </div>
   <div class="edit-item-image__btn-wrap">
      <button class="button button--small button--black-border edit-item-image__btn">Добавить</button>
      <button class="button button--small button--black-border edit-item-image__btn">Удалить</button>
   </div>
</div>

Данная разметка является частью формы <form><form/>. И по этой разметке мне нужно создать JSX/TSX реакт-компонент. Собственно создать компонент не проблема. Проблема как реализовать загрузку файла с ПК. Единственное что удалось по теме загуглить, это использовать скрытый input[type="file"] и при клике на кнопку вызывать срабатывание этого скрытого инпута.

Но возможно в Реакте есть какие-то способы реализовать загрузку файла иным способом? Какой-нибудь экзотический хук про который я не знаю, или на крайний случай, какой-нибудь npm-пакет, решающий поставленную задачу?

UPD. Уже больше часа на самом деле гуглю и ничего внятного не нашёл. Однозначно не берусь утверждать в силу отсутствия опыта, но есть ощущение, что мне просто косячную вёрстку подсунули и нужно выкинуть <button> и заменить его стилизованным <input type="file">

javascript html reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Если Вам нужно сделать React компонент, тогда скройте input[type="file"] и воспользуйтесь хуком useRef,чтобы получить ссылку на input[type="file"] Потом создайте кнопку и подпишите ее на событие onClick и в функции которая будет срабатывать при нажатии на кнопку программно используя ссылку на input[type="file"] кликните по input[type="file"]. как-то так:

const inputFile = useRef(null);

const hendlerInput = () => {
    inputFile.current.click();
  };

<button onClick={ hendlerInput }>Добавить</button>

<input type="file" ref="inputFile" className="hidden" />