I have a react electron app where the user can drag and drop files on the front end react component, and those files are sent to the backend via an ipc render function. I need to be able to get the full filepath for these dropped files from within the backend main.js electron process, but I can't figure out how to do so.

  const handleDrop = async (event) => {
    // Get dropped files
    event.preventDefault();
    const droppedFiles = Array.from(event.dataTransfer.files);
    console.log('Dropped files:', droppedFiles);

    // Send dropped files to backend main.js process
    window.api.send('get-filepaths', droppedFiles);

    // Handle returned file paths
    window.api.receive('get-filepaths-response', ( filepathsRsp ) => {
      console.log('Received file paths:', filepathsRsp);
    });
}

You can see on the front end my react app prints out the dropped file details, and filepath is not there.

Then in the main.js backend, the filepaths are received, but how do I in this main.js code below get the filepath for these files?

ipcMain.on('get-filepaths', (event, files) => {
  console.log('get-filepaths: ', files);

  // Get filepaths for each file
  files.forEach(file => {
    console.log('file = ', file.name)
  });

  // Send filepaths back to front end
  event.reply('get-filepaths-response', ['filepath1','filepath2']);
});

get-filepaths:  [ {}, {}, {} ]
file =  undefined
file =  undefined
file =  undefined

How can I get the filepath from these files in my backend main.js? I see in the electron docs online a section for how to do this with Renderer Process Modules, but I cant find any info on how to do this with Main Process Modules

All my code is on the main branch here: