Как реализовать прикрепление файлов к форме с помощью перетаскивания?

Question

[Ростислав]

Есть такая верстка формы.

Сделал прозрачный <input type="file" multiple>
и разместил его над блоком "перетащите файлы сюда". Перетаскивание вроде работает как нужно. Также должно быть не сложно взять у этого input названия прикрепленных файлов и отобразить с красивым дизайном (как на скрине).
Но как сделать удаление конкретного файла из input-a?
Например пользователь перетащил 4 файла, потом 1 решил убрать, нажал крестик, название файла убралось.
Как теперь этот файл открепить от input?
Вроде как присваивать значение для нельзя.

Answer 1

[Stalker_RED]

Документация: https://developer.mozilla.org/en-US/docs/Web/Event...

Готовая реализация: dropzonejs

Но как сделать удаление конкретного файла из input-a?

Никак. FileList - readonly по соображениям безопасности. но вы можете скрыть превьюшку и отправить на сервер информацию о том, что файл такой-то нужно проигнорировать.

Comments

[Ростислав]

Жесть.
Сайт на Wordpress, для формы использую плагин Contact form 7, для загрузки нескольких файлов использую плагин-дополнение для Contact form 7.
Теперь придется писать дополнение для плагина-дополнения плагина Contact form 7 )
Вашу идею понял, спасибо, буду пробовать.

[Stalker_RED]

Ростислав: Эт не моя идея, это ссылка на офф. доки и одна из самых старых реализаций библиотечки для драг-н-дропа. Можно поискать и что-то поновее.

Answer 2

[Алексей С.]

Как то так: https://jsfiddle.net/alexjamesbrown/2nzL9f7g/