Why is the JavaScript spread notation not working here

Question

I am learning React and have this simple problem I can't solve.

Here in the image: the file is a key-value array like the image show.

After this code below has run:

return { ...file, md5: SHA256(fileContents).toString() };

Then the result is that key value pairs are removed like this image show:

As you see the file now only contains path and md5 and everything else is gone.

I know this got to do with maybe shallow copy principle but I have search for a solution but can't understand how to fix this.

const FilePicker = ({ setNewFileForValidation }) => {
    const readFileContents = async file => {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.onerror = reject;
            fileReader.readAsBinaryString(file);
        });
    };
    const readAllFiles = async AllFiles => {
        const results = await Promise.all(
            AllFiles.map(async file => {
                const fileContents = await readFileContents(file);
                return { ...file, md5: SHA256(fileContents).toString() };
            }),
        );
        console.log(results, 'resutls');
        return results;
    };

    function onDrop(acceptedFiles, rejectedFiles) {
        readAllFiles(acceptedFiles).then(result => {
            setNewFileForValidation(result);
        });
    }
    return <Dropzone onDrop={onDrop} />;
};

The file is coming from react-dropzone and contains the result from the file picker. Maybe that is the reason this spread copy does not work?

Maybe File is some kind of a special object? Not every property of every object is enumerable. Could you avoid the problem by doing ```return (file.md5=SHA256(fileContents).toString(),file);``` ? — loop, May 03 '21 at 19:55
More on special properties: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty — loop, May 03 '21 at 19:58
@loop yes it works using `return (file.md5=SHA256(fileContents).toString(),file);` but then I mutate state I think, not sure — Kid, May 03 '21 at 20:00
I created a [Codesandbox](https://codesandbox.io/s/react-dropzone-sha256-5ngg7?file=/src/FileUpload.js) — Kid, May 03 '21 at 20:26
Please provide data as text, not as a picture of text. Humans with visual impairments and search engine bots can't read your images. — Heretic Monkey, May 03 '21 at 20:35
A map with async will just return an array of promises which is handled just fine here, I think. — loop, May 03 '21 at 20:42

loop · Accepted Answer · 2021-05-04T04:24:16.400

File is a special object whose properties are not enumerable. Therefore the spread syntax is not working expectedly. You need to clone the File object using the File constructor.

readAllFiles = async (AllFiles) => {
    const results = await Promise.all(
      AllFiles.map(async (file) => {
        const fileContents = await this.readFileContents(file);
        // THIS IS THE PROBLEM
        //return { ...file, md5: SHA256(fileContents).toString() };
        file = new File([file], file.name, { type: file.type })
        file.md5 = SHA256(fileContents).toString();
        return file;
      })
    );
    console.log(results, "result");
    return results;
  };

score 2 · Answer 2 · answered May 03 '21 at 20:53

Maybe you can turn map to a for.

readAllFiles = async (AllFiles) => {
  let results = [];
  for (let file of AllFiles) {
    const fileContents = await this.readFileContents(file);
    results.push({ file, md5: SHA256(fileContents).toString() });
  }

  console.log(results, "result");
  return results;
};

score 0 · Answer 3 · answered Apr 04 '22 at 14:45

0

You can use Object.assign instead of spread syntax so instead of:

{ ...file, md5: SHA256(fileContents).toString() };

use this:

Object.assign(file, { md5: SHA256(fileContents).toString() });

answered Apr 04 '22 at 14:45

Az.Youness

2,167
1
24
33

Nick Parsons · Answer 4 · 2022-11-04T10:42:08.557

The accepted answer is correct in that object spread doesn't copy non-enumerable properties, but it isn't right about the fact that File has non-enumerable properties. The reason the File's properties aren't copied when you spread is for a different reason.

Objects can have own properties as well as properties on their prototype. For example, the object {x: 1} has x as an own property, and then methods such as toString() on its prototype. When you spread an object, only the own (enumerable) properties are copied to the newly created object. In the case of a File object, it has no own properties (ie: it looks like {}), and rather, all of its properties you see are maintained on the prototype ([[Prototype]]) of file (and on its prototype, etc.):

const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

console.log(Object.getOwnPropertyNames(file)); // [] (nothing here, so nothing is spread to the new object)
console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(file))); // ["name", "lastModified", "lastModifiedDate", "webkitRelativePath", "constructor"] (not copied with `...` as they're on the prototype)

As a result, you can either create a new file object using new File() and pass through the properties of your file object to the constructor and then add your new property to this object (as shown in loop's answer), or, if you're fine with modifying the original file object, you can do as other answers suggest and instead modify the file object directly.

Why is the JavaScript spread notation not working here

4 Answers4

Linked