How to get json of base64 from file list

Solution 1:

The map() method uses the return value of the function as it is See map() in MDN.

The variable list will contain a list of Promises instead of the intended object.

You should wrap the map with await Promise.all() See Promise.all() in MDN and make the function async to have the objects array.

const handleFiles = async (files: Array<File>) => {
  const list = await Promise.all(files.map(async (file) => {
    return {
      name: file.name,
      base64: await getBase64(file),
    };
  }));
  return list;
}

Solution 2:

Its hard to be sure, but I think your issue is you are performing asyncronous operations within a map, so you need to ensure the promises resolve. I think this would solve your issue.

const handleFiles = async(files: Array<File>) => {
  const list = await Promise.all(files.map(async (file) => {
    return {
      name: file.name,
      base64: await getBase64(file),
    };
  }))
  console.log(list)
}