Как использовать Drag and Drop для загрузки файлов в любом месте на сайте | Chrome World по-русски

Как использовать Drag and Drop для загрузки файлов в любом месте на сайте

Я обнаружил эту скрытую функцию, загрузив плагин на сайт WordPress с помощью панели инструментов. WordPress которая не поддерживает Dropzone, поэтому он заставил меня выбрать файл с помощью глупого диалога File Explorer. Концепция навигационных файловых менеджеров мне не нравится (например, Finder на macOS), поэтому я избегаю их, когда могу. 

Иногда сайты обнаруживают, что пользователь перетаскивает файл, и соответственно изменяют формат ввода. Этот трюк с UX может произойти, даже если вначале нет очевидной дроп зоны. В WordPress этого нет, но кнопка «Выбрать файл» приятно удивила меня, когда она с готовностью принял файл, который я на нее сбросил. Это стандартная функция ввода самого, что разработчики создают с этим: .<input type="file">

Где это работает?

Это только для рабочего стола. Это работает с несколькими файлами на кнопках, которые настроены таким образом. Что касается браузеров, уловка, кажется, работает универсально, за исключением Edge. Я тестировал на MacOS Safari, Firefox на Ubuntu, Chrome, Firefox, Вивальди (в Chrome спин-офф для разработчиков, о которых я должен все же писать). Пользователи, для которых это важно, не используют браузер Edge, так что все хорошо.

Последние мысли

Кажется, что пользователи хотят перетаскивать файлы, поэтому в этом есть необходимость, когда дело доходит до загрузки. Кажется, они не знают эту скрытую особенность. Поэтому разработчики создают дропзоны, чтобы помочь тому, что уже существует изначально. Я верю, что было бы мудро рассказать об этом!