Как получить объект файла со страницы?

Question

[kserg903]

Существует объект FileList, который можно заполнить через окно выбора файла, всплывающее после клика по
<input id="myfiles" type="file">

Объект типа FileList можно получить так:

var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;

Таким образом мы загрузили файл и получили его в виде объекта типа FileList.

Но мне непонятен случай когда страница загрузилась, в её коде есть файл-картинка. Подскажите пожалуйста как можно получить доступ к объекту этой картинки, если такое вообще возможно.

В результате я хотел бы иметь объект типа FileList, который ссылается на файл-картинку из страницы.

Comments

[Kovalsky]

Насколько я понимаю, на данный момент не существует возможности добавить файл в FileList - https://stackoverflow.com/questions/38580177/how-t... . Разве что селениум или что-нибудь такое

[kserg903]

требуется отправить по API файл в формате объекта типа FileList:
1. после того как пользователь кликнет по Input и в модальном окне выберет файл
2. по событию(без выбора в модальном окне). в этом случае файл заранее известен и находится в DOM страницы

С первым пунктом проблем нет. А вот со вторым есть

[Kovalsky]

kserg903, значит придётся вручную запихивать картинку в FormData, а еще лучше даже будет передавать ссылку на картинку, хотя конечно тогда понадобится переписывать бэкенд

[kserg903]

Kovalsky, в том то и проблема, что непонятно как это делать вручную)

[Kovalsky]

kserg903, думаю много полезного можно найти в примерах из интернетов, например по запросу "js append image to formdata"

[kserg903]

Kovalsky, formdata тут не при чём. FileList привязан к input. В FileList содержатся файлы, загруженные через этот input

[Kovalsky]

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

Можете еще попробовать DataTransfer, но он вроде бы проблемный, насколько я понял.