Как получить все свойства файлового объекта в javascript?

Question

Я получаю значение Файлового объекта при использовании <inpu type="file" />, но при доступе к e.target.files[0] я не могу использовать его с оператором распространения или Object.assign.

Я хочу сохранить состояние со всеми свойствами файла и добавлением в него дополнительных данных, но он не работает, он дает мне пустой объект.

Вот код и окно для его воспроизведения .

const onChange = e => {
    const file = e.target.files[0];
    console.log(file); // Logs File Object
    console.log({ ...file }); // Logs empty Object
    console.log(Object.assign({}, file)); // Logs empty Object
    setFile({ ...file, extraData: "hey" }); // Sets Object only with `extraData`
}

Почему не распространяется свойства файла?

Answer 1

Из документов MDN:

Метод Object.assign () копирует все перечисляемые собственные свойства из одного или нескольких исходных объектов в целевой объект. Возвращает целевой объект.

Я предполагаю, что вы ссылаетесь на унаследованные свойства объекта File. В этом случае метод Object.assign не учитывает их. То же самое касается оператора распространения.

Решением будет использование библиотеки loda sh и метода assignIn (), который применяется как к собственным, так и к унаследованным свойствам объекта.