Добавление файлов в input file перетаскиванием НЕ из файловой системы

Question

У меня есть input file, хотелось бы, чтоб можно было перетаскивать туда изображения не из файловой системы (это работает отлично), а из других источников (например WAWeb). Сейчас при попытке перетащить файл он открывается в новой вкладке по ссылке такого вида "blob:https://web.whatsapp.com/{GUID}" Подскажите, как можно реализовать такую возможность? Предпочтительно использование JS, jQuery

Answer 1

Решение примерно такое:

<input type="file"
  id="drop_zone"
  ondrop="dropHandler(event);"
  ondragover="dragOverHandler(event);">
>

<script>
function dropHandler(ev) {
  console.log("File(s) dropped");

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  
    // Use DataTransfer interface to access the file(s)
    [...ev.dataTransfer.files].forEach((file, i) => {
      console.log(`… file[${i}].name = ${file.name}`);
    });
}

function dragOverHandler(ev) {
  console.log("File(s) in drop zone");

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}
</script>

Проблема была в том, что, если в перетаскиваемом объекте ни только FileList, то стандартное поведение при ondragover (попадание объекта в область для перетаскивания) и (объект отпущен/брошен в области для перетаскивания) для input type="file" - открыть этот объект в новой вкладке. WhatsApp Web (скорее всего и многие другие ресурсы) при перетаскивании картинки как раз передаёт dataTransfer, который содержит помимо файлов и другие item, поэтому обязательно нужно отменять стандартное поведение.

БЛОГ НА HUSL

Добавление файлов в input file перетаскиванием НЕ из файловой системы

Ответы (1 шт):