Drag-n-drop состояния [web]

Первый раз столкнулся с админочной drag-n-drop алкой.
Нужно сделать состояния для различных ситуаций.

У нас есть одно допустимое расширение файла. Не могу понять каким образом лучше сделать отображение кейса, что человек скидывает иной формат. Нужно ли сразу бомбить, блокируя непосредственно драговер файла в активную зону? Или давать помещать файл, и выкидывать ошибку? Обводить красным зону — считаю неправильно, как будто предостерегает от дальнейших действий.

Как бы вы сделали?

p.s. Есть статейка NNG на эту тему, но я там не увидел про ошибки, вот и думаю …

1 симпатия

Очень хорошим решением было бы при наведении на зону дропа возле курсора выводить сообщение о неправильном формате и показать решение проблемы. зону дропа не делать активной, а при попытке дропа просто сделать анимацию “растворения” файла (как референс инструмента из тулбара в макОС, в скетче), ну или какую либо другую анимацию которая будет отличаться от “попадания” файла в зону дропа . Не писать “Запрет на загрузку” это неинформативный текст, а к примеру “попробуй ПНГ”, в зависимости от стиля общения с пользователем.

2 симпатии

Статья о разных Drag and Drop паттернах, может поможет. В закладках пылилась

1 симпатия

Спасибо, всё звучит логично, только в админке мы, конечное, до анимации не доберёмся :slight_smile:

при наведении на зону дропа возле курсора выводить сообщение о неправильном формате и показать решение проблемы

Такое сообщение, как понимаю, должно следовать за курсором? Что-то вроде тултипа?
Тоже норм, только тогда я боюсь длинных сообщений в тултипах :E

1 симпатия

CSV Upload and Parse by Chris Johnson

Вот хороший пример драг дропа с ошибкой. Текст ошибки появляется под зоной дропа с вибрацией для привлечения внимания.

1 симпатия

Это оч хорошо, спасибо!
Такого позиционирования при загрузке от фронтов вряд ли добьюсь ради админки, но про ошибки — самое оно!