Как использовать Drag and Drop для загрузки файлов в любом месте на сайте
Мне было интересно, известен ли этот простой маленький трюк. Вы можете перетащить файл на кнопку «Выбрать файл» (зоны выбора файла), чтобы выбрать его для загрузки. Смысл статьи в том, что, возможно, люди не знают этого. Судя по тому, что на сайтах должна быть реализована модная дроп зона, чтобы облегчить перетаскивание файлов. Учебники для решения, как этот в CSS-Tricks это круто, и это прекрасно, когда сайты предлагают это – не поймите меня неправильно. Тем не менее, они заставляют меня предположить, что пользователи думают, что Dropzone является единственным способом избежать навигации по всплывающему окну что бы найти и выбрать файл. Это занимает слишком много времени, и у вас, вероятно, уже есть окно, указывающее на ваш файл. Возможно, вы только что создали файл, который хотите загрузить, и он готов к перетаскиванию из другого окна.
Перетащите файл плагина, чтобы загрузить его
Я обнаружил эту скрытую функцию, загрузив плагин на сайт WordPress с помощью панели инструментов. WordPress которая не поддерживает Dropzone, поэтому он заставил меня выбрать файл с помощью глупого диалога File Explorer. Концепция навигационных файловых менеджеров мне не нравится (например, Finder на macOS), поэтому я избегаю их, когда могу.
Иногда сайты обнаруживают, что пользователь перетаскивает файл, и соответственно изменяют формат ввода. Этот трюк с UX может произойти, даже если вначале нет очевидной дроп зоны. В WordPress этого нет, но кнопка «Выбрать файл» приятно удивила меня, когда она с готовностью принял файл, который я на нее сбросил. Это стандартная функция ввода самого, что разработчики создают с этим: .<input type="file">
Где это работает?
Это только для рабочего стола. Это работает с несколькими файлами на кнопках, которые настроены таким образом. Что касается браузеров, уловка, кажется, работает универсально, за исключением Edge. Я тестировал на MacOS Safari, Firefox на Ubuntu, Chrome, Firefox, Вивальди (в Chrome спин-офф для разработчиков, о которых я должен все же писать). Пользователи, для которых это важно, не используют браузер Edge, так что все хорошо.
Последние мысли
Кажется, что пользователи хотят перетаскивать файлы, поэтому в этом есть необходимость, когда дело доходит до загрузки. Кажется, они не знают эту скрытую особенность. Поэтому разработчики создают дропзоны, чтобы помочь тому, что уже существует изначально. Я верю, что было бы мудро рассказать об этом!
Источник записи: https://letswp.io