Как можно добавить в форму файл?

Question

[Дмитрий]

Здравствуйте!
Чего то тупик у меня, требуется добавить файл к форме, делаю так:
Есть форма

<form name="test">
        <input type="file" id="files" accept=".docx" value=""/>
        <button id="loadButton">load</button>
    </form>

let fileInputElement = document.getElementById('files');
        let container = new DataTransfer();
        let data = new Blob();
        let file = new File([data], "y9ai4V96h1oMTyfUZrBsAFb8sopJ79PSxxqg7FdH.docx",{type:"application/vnd.openxmlformats-officedocument.wordprocessingml.document", lastModified:new Date().getTime()});
        container.items.add(file);
        fileInputElement.files = container.files;
        var size = file.size;
        console.log(size);

Что не так делаю?
И так пробовал

var formData = new FormData();
var file_obj = document.querySelector('input[type="file"]').files[0];
formData.append("file", file_obj, "y9ai4V96h1oMTyfUZrBsAFb8sopJ79PSxxqg7FdH.docx");

Не работает и все тут.

Comments

[ThunderCat]

Что конкретно не работает то?

[Владислав Лысков]

accept=".docx" - тут должен быть mime-тип, а не формат

document.querySelector('input[type="file"]').files[0]; - тут вообще происходит нечто странное, попробуйте вывести это в консоль

[Дмитрий]

ThunderCat, Да не добавил)) В консоли ошибка - Uncaught TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

[ThunderCat]

Дмитрий, ну так что мешает проверить содержимое передаваемой переменной?

[Дмитрий]

Владислав Лысков, Убрал и такое, но не помогает.

[Дмитрий]

ThunderCat, не совсем понимаю ошибку.

[ThunderCat]

Дмитрий, Ну хоть гугл транслейтом переводите... аппенд не может засунуть в формДата значение второго параметра, так как оно не является двоичным/кодированным64 представлением файла (в простонародье - блоб).

[Дмитрий]

ThunderCat, Спасибо, за помощь, текст я понимаю что написано, я не пойму что не так сформировано.
пробовал и так var file_obj = document.querySelector('input[type="file"]');
Все равно тоже самое.

[ThunderCat]

Дмитрий, есть волшебная функция, console.log(), смотрите что у вас в этой переменной, и ДОЧИТЫВАЙТЕ РЕКОМЕНДАЦИИ ДО КОНЦА, не надо их кусками делать, а потом снова писать сюда, у вас как будто больше одной операции за раз в буфер не помещается...

Answer 1

[Надим]

Во первых, непонятно откуда вы берете файл для вставки. Что лежит в переменной data и откуда оно туда попадает?
Во вторых, вы совершенно неправильно понимайте назначение конструкторов FormData и DataTransfer.

Answer 2

[kalibr17]

Для безопасности поле file нельзя присвоить значение вручную. И все)