отловленый файл с event'a прикрепить к инпуту
 

Всем здрасте, возможно ли отловленный файл с евента прикрепить к инпуту?

<input type="file" name="file">

если я пытаюсь добавить к value полученный файл получаю SecurityError: The operation is insecure

var files = e.target.files || e.dataTransfer.files;
 
var file = files[0];

у меня есть форма которая добавленный файл сохраняет без аякса, попросили добавить ещё drag and drop чтобы можно было перетягивать файл, идеально было-бы чтобы сохранение файла логика осталась тойже.

настолько тяжелая тема что ни у кого никаких мыслей на этот счёт?))

Или я не понятно изложил проблему?)

new_developer, Попробуйте и поделитесь опытом.

Из события нужно вытянуть экземпляр класса FileList и попытаться присвоить его инпуту.

Сильно сомневаюсь, что файловый инпут можно программно заполнить списком файлов из D-n-D.

Потому, вариантов два:

1) таки отправлять форму аяксом. FormData, всё просто и без заморочек. TrueЪ way в современном фронтенде. Если серверный обработчик формы работает с кодировкой utf8, то в нем вообще ничего менять не придется.

2) Во многих браузерах файловый инпут уже умеет схватить файлы, которые падают на него при перетаскивании. Остается только это дело красиво оформить: в обработчике документного события dragover (когда указатель мыши с выбранными файлами заехал на страницу, но ещё не было сброса) показываем див с предложением "перетащите файлы сюда", ну как обычно делается, а поверх этого дива растягиваем файловый инпут, сделав его прозрачным. Тогда сброс файлов произойдет на файловый инпут, на нем сработает событие "change", и можно будет спрятать див и вообще вернуть всё на место.
Я эту схему не проверял, но навскидку должна сработать.

Если методом перетаскивания, то поля ввода и не нужно, у dataTransfer будет своя коллекция files.

По поводу перетащить и добавить к инпуту не получится по крайней мере во всех браузерах точно. Делаю аяксом.