Как получить такой же объект, который нам отдаётся из input file?

Question

[1233211]

При загрузке файла через мы получаем объект с ключами lastModified, lastModifiedDate, name, size, type и webkitRelativePath. Как можно получить такой же объект, имея ссылку на картинку?

Answer 1

[Alexandroppolus]

натрави fetch на эту ссылку с картинкой. Скачается примерно такой же объект, правда, без lastModified, lastModifiedDate, name и webkitRelativePath. Но они тебе всё равно не нужны.

https://developer.mozilla.org/en-US/docs/Web/API/R...

Comments

[zkrvndm]

Если полученный через fetch Blob запихнуть в конструктор new File, будет на выходе точно такой же объект.

[Alexandroppolus]

Надим Закиров, можно, но лучше не надо )) Это же всё равно будет не файл, а черт знает что.

[zkrvndm]

Alexandroppolus, будет именно файл и из него даже можно будет создать рабочий FileList для вставки в input[type="file"]

Answer 2

[zkrvndm]

Пример:

(async function() {
    
    var blob = await (await fetch('https://dr.habracdn.net/qna/637b1a73/images/favicons/apple-touch-icon-180x180.png')).blob();
    
    var file = new File([ blob ], 'Favicon.png', { type: blob.type });
    
    console.log(file);
    
})();

Открой консоль на этом сайте Ctrl + Shift + J и вставь и запусти код выше.

Только чтобы был правильный lastModified, надо отдельно вытаскивать его из заголовков ответа.