Как сделать из input type file рабочую drag and drop область?

Question

[Alice777]

Вот мой код, не получается сделать возможным drag and drop для него
https://jsfiddle.net/gc0onfhm/

Answer 1

[uni_rush]

повесить на элемент обработчик события drop, с помощью DataTransfer() получить получить список дропнутых фаилов и и далее с ними работать ( передавать на сервер или выводить превьюхи в документ)
https://developer.mozilla.org/en-US/docs/Web/API/H...

Comments

[zkrvndm]

На самом деле не обязательно. Поле input type files из коробки умеет принимат файлы при перетаскивании их на него, т. е. достаточно сделать это поле прозрачным и растянуть на всю ширину и высоту родителя, а дальше тупо ловить событие change на поле.

[uni_rush]

Надим Закиров, а потом вешать обработчик drag`a что бы поменять бэкграунд или покрасить бордер у родителя при перетаскивании фаила?

[zkrvndm]

uni_rush, ну это уже тонкая настройка, не всем она нужна.

[uni_rush]

Надим Закиров, ну в целом да.