how to set a value of a key of an array object in javascript?

Question

I'm creating a drag and drop files(multiple files can be selected) feature. WHere user can select multiple files.I want to convert the size of file from byte to mb. . the function to get all the files

scripts.js

const handleFiles = (files) => {
  files = [...files];

//converting bytes into mb and trying to assign it back to size key
  files.forEach(function (file) {                      <----these lines need to be changed
    file["size"] = `${(file["size"] / 1024 ** 2).toFixed(2)} mb`; <------
  });                                                  <-----
  console.log(files);
};

I'm getting this as an output of files variable value in console.

Why i'm using spread operator?

Ans: If i don't use the spread operator and user select only one file then it is passed as an object and not as a list of object

How can i set the value of each size key of an object with new value.

Answer 1

File.size is a read-only property, you cannot change it (see here: https://developer.mozilla.org/en-US/docs/Web/API/File#instance_properties ). If you want to show file size in Mb in your UI, you will have to get the File.size (or File["size"], like you are doing), and process it like you do in your function to show it in the UI (have the function return an array of sizes, or include the size formatting in the rendering part of your app), but you cannot change the property on the File instances themselves.