Как сделать drag and drop файла в форму, но без загрузки файла на сервер?

Question

[Chernichko]

Доброго дня!

У меня есть форма для загрузки файла, который потом будет обрабатываться обработчиком)

Можно файл загрузить стандартной кнопкой "выбрать файл", а можно перетащить файл в поле с формой

Делаю по примеру https://habr.com/post/125424/

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



Как мождно такое реализовать?

Comments

[Сергей delphinpro]

ну так вы его просто не загружайте раньше времени и всё =))

В ondrop сохраняйте файл(ы) в переменную
files = event.dataTransfer.files;
а по клику на кнопку отправляйте на сервер.

[Chernichko]

Сергей delphinpro, это оно хорошая идея.
Но у меня трудность другая образовалась: я отправляю файл

var xhr = new XMLHttpRequest();
        xhr.open('POST', '/catalog/user-uploadcsv');
        xhr.setRequestHeader('X-FILE-NAME', file.name);
        xhr.setRequestHeader('X-CSRF-TOKEN', token);
        xhr.send(file);

он приходит на user-uploadcsv и не загружается в необходимую папку

$dir = $_SERVER['DOCUMENT_ROOT'] . '/tmp/';
        $name = $dir . $_FILES['file']['name'];
        move_uploaded_file($_FILES['file']['tmp_name'], $name);

и в network никаких особенных замечаний и ошибок (((

у папки парва 0777 и владелей www-data:www-data