How do I get my Data to return from my IpcMain

Question

I am creating a drag n drop in react and using electron to send and receive my file data. I'm receiving a senderId and sender in console.log. How can I get the data to appear? What am I missing?

Dropzone.js file

const [fileNames, setFileNames] = useState([]);

const handleDrop = useCallback(acceptedFiles => {
  setFileNames(_.map(acceptedFiles, ({ name, type, path, size, lastModified, 
   lastModifiedDate }) => {
    return { name, type, path, size, lastModified, lastModifiedDate };
  }))
  let formData = new FormData();
  formData.append('uploadedFiles', fileNames);
}, [fileNames]);


useEffect(() => {
  ipcRenderer.send(FETCH_AUDIO_FILES, fileNames);
}, [fileNames]); 

useEffect(() => {
  const handler = (filesWithData) => {
  _.map(filesWithData, (event, data) => {
    console.log(data);
  })
};
ipcRenderer.on(METADATA_COMPLETED, handler);
  return () => ipcRenderer.removeListener(METADATA_COMPLETED, handler);
});

Index.js file

 ipcMain.on(FETCH_AUDIO_FILES, (event, files) => {
    const promises = _.map(files, (file) => {
    return new Promise((resolve, reject) => {
    NodeID3.read(file.path, (err, tags) => {
       resolve({
         ...files,
         ...tags
      })
    })
  })
});

Promise.all(promises).then(results => { 
  event.sender.send(METADATA_COMPLETED, results);
 [![enter image description here][1]][1]});
});

Answer 1

You can't send special objects such as Files over the IPC channel:

Arguments will be serialized with the Structured Clone Algorithm, just like postMessage, so prototype chains will not be included. Sending Functions, Promises, Symbols, WeakMaps, or WeakSets will throw an exception.
NOTE: Sending non-standard JavaScript types such as DOM objects or special Electron objects is deprecated, and will begin throwing an exception starting with Electron 9.

-- https://www.electronjs.org/docs/api/web-contents#contentssendchannel-args

You could read your file as a Base64 string, a Buffer or whatever in the renderer process, then send it to the main process, or if you're looking to pick files, maybe do it all in the main process with eg https://www.electronjs.org/docs/api/dialog#dialogshowopendialogbrowserwindow-options ?