Вы когда-нибудь задумывались, как создать компонент dropzone для файлов с нуля, используя React? Как открыть диалог раздела файла в React? Вам интересно, как отслеживать события падения файлов? Если вы ответили утвердительно хотя бы 1 раз. Продолжить чтение…
Настройка проекта
Мы будем использовать мою конкретную настройку проекта, доступную здесь! Подробнее об этой настройке вы можете узнать в следующей статье. Теперь вперед, клонируйте репозиторий Github и приступим.
Создание компонента Dropzone
Поскольку мы создаем отдельный компонент, нет ничего плохого в том, чтобы разместить его в src/index.js. Структура компонента dropzone довольно проста. Это просто div обертка input компонента. И, конечно же, текст, говорящий пользователю, что делать. Мы также используем classNames для будущего стиля. Нам нужно убедиться, что не отображается input, поскольку он не очень приятен для глаз, но он нам все еще нужен для открытия диалогового окна файла.
Как открыть файловый диалог
Пришло время открыть диалоговое окно системного файла, когда пользователь нажимает на компонент. Это диалоговое окно открывается после того, как пользователь щелкнет input, имеющий тип файла. Поскольку мы не отображаем это input, нам нужно использовать небольшую хитрость. Мы собираемся добавить обработчик onClick в компонент dropzone. И в этом обработчике мы будем использовать ref для запуска события клика на input.
Определение свойства вывода
Теперь пора обработать файлы, которые были добавлены через файловый диалог. Поскольку файлы поступают в виде FileList, нам также необходимо преобразовать их в массив javascript. Давайте напишем функцию, которая сделает эту работу за нас, а также добавим обработчик файлов. Когда файлы будут преобразованы, мы вызовем функцию onFilesAdded. Поскольку компонент не знает, что ему делать с файлами, мы позволим нашим коллегам-разработчикам решить, что с ними делать. Другими словами, onFilesAdded будет передан как компонент props.
Обработка событий перетаскивания
А теперь самое интересное. Мы хотим сделать наших пользователей счастливыми. Мы позволим им перетаскивать файлы в наш Компонент. Но сначала давайте добавим дополнительный стиль, который будет указывать на то, что что-то происходит, когда они перетаскивают файл в область перетаскивания. Давайте просто заставим dropzone немного сжаться для состояния зависания. Мы собираемся ввести свойство состояния, которое будет указывать, держит ли пользователь файл над компонентом. Мы собираемся использовать синтетические события onDragOver и onDragLeave. Имена говорят сами за себя.
Последняя недостающая часть - это обработка, когда пользователь выпускает файл в эту область. Для этого воспользуемся другим синтетическим событием под названием onDrop. Здесь мы хотим взять файлы, которые были отброшены и вызвать наш onFilesAdded обработчик. Также очистка состояния зависания после не кажется плохой идеей.
Компонент полной dropzone
Это может показаться странным, но это все! Весь репозиторий кода доступен здесь! Примеры доступны здесь. Он содержит некоторые улучшения, такие как индикатор загрузки. Но общая идея остается прежней.
Вывод
В этой статье вы узнали, как создать компонент dropzone для файлов с нуля с помощью React.
Если вы хотите, чтобы я затронул определенную тему, дайте мне знать в комментариях.
Спасибо за чтение и до следующего раза!
