Возможно ли прописать свое value в input type file?

#javascript #fileupload

Возможно ли добавить свои файлы в input type=file? Имеется ввиду, что записывается
в value, когда файлы были добавлены? Т.к. мне нужна возможность менять файлы, которые
я буду отправлять (У меня идет drag'n'drop и при drop'e файла я создаю свой массив
в который сохраняю fileList и нужно узнать, что из этого массива пойдет в value).
    

Ответы

Ответ 1

*Перевод данного ответа

*Это возможно если у вас есть dataTransfer или объект FileList

Раньше, Программное изменение файлов через поле input[type=file] было отключено из
соображений безопасности но это исправлено в современных браузерах.

Firefox, последним из основных браузеров, добавил возможность, позволяющую нам установить
файлы для input полей типа file. Так же согласно W3C тестированию, это осуществимо
в Google Chrome.

Соответствуюзий скриншот и текст из MDN:




  Вы можете установить, а также получить значение HTMLInputElement.files во всех
современных браузерах. 
  Смотри совместимость здесь MDN


В Firefox обсуждениях ошибок и исправлений есть демо которое вы можете посмотреть
И также исходный код если вы хотите это поредактировать. Снизу представлен исполняемый
код из этой ссылки:



let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');
  
  fileInput.files = e.dataTransfer.files;
});
body {
  font-family: Roboto, sans-serif;
}

body.dragging::before {
  content: "Drop the file(s) anywhere on this page";
  position: fixed;
  left: 0; width: 100%;
  top: 0; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  background-color: rgba(255, 255, 0, .3);
  pointer-events: none;
}

button, input {
  font-family: inherit;
}

a {
  color: blue;
}



  
  
       

  


  
  
Drag and drop files into file input
  
  
Supported in WebKit
and Blink. To test, drag and drop one or more files from your operating system
onto this page.
  
  

    
  










  Важно:
  
  Вы можете сделать это только если у вас есть объект FileList или dataTransfer который
вы можете установить для элемента входного файла(так как метод не принимает строки
в виде обычно текста).
  
  Для больше информации смотрите здесь: How to set File objects and length property
at FileList object where the files are also reflected at FormData object?


Небольшой пример как установить значение для input после того как файл будет сброшен:

document.querySelector('.селектор-вашего-поля-для-дропа')
    .addEventListener('drop', (ev) => {
        ev.preventDefault();
        document.querySelector('.селектор-вашего-input-елемента').files = ev.dataTransfer.files;
    });