CODEWITHSUNDEEP
javascriptpathelectrondrag-and-drop
Rafax
Rafax

Reputation: 11

How to get the absolute path of a file dragged onto an input file in Electron?

I’m developing an application using Electron and encountered an issue when trying to get the absolute path of a file that has been dragged and dropped onto a file input field.

As we know, Electron uses a browser-based interface, which makes it difficult to access the absolute paths of dragged-and-dropped files. So far, I’m able to get the absolute path of files when opening the file dialog using the dialog.showOpenDialog method in the main process, as shown in the example below:

//Process main (main.js):

// Example of how to get the absolute path of a video
ipcMain.handle('select-file', async () => {
    const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
        properties: ['openFile'],
        title: 'Select your video file',
        filters: [
            { name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv'] }
        ]
    });
    return canceled ? null : filePaths[0];
});

//Renderer process (renderer.js):

uploadSection.addEventListener('click', async () => {
    const filePath = await ipcRenderer.invoke('select-file');
    if (filePath) {
        console.log('Selected file:', filePath);
    }

});

This works well to open the file picker, but I would like to achieve something similar when dragging and dropping the file directly onto the input. However, since the absolute path is not directly accessible via the browser's file input API, I’m having difficulty implementing this in Electron.

Has anyone faced this or found a solution to obtain the absolute path of a file that has been dragged and dropped onto a file input in Electron?

Thanks in advance for your help!

I’ve tried several methods so far, but none seem to fit my case. I’m also wondering if web.utils.PathForFiles from Electron might be the solution, but I haven’t found any implementation examples for my case.

Upvotes: 0

Views: 179

Answers (2)

almost
almost

Reputation: 1

https://github.com/electron/electron/issues/44370 File API: it is no longer possible to get a dropped file's absolute path

To use webUtils.getPathForFile to retrieve the path of a dragged-and-dropped file, you need to expose a new API in preload.js. Below are the detailed steps:

  1. Modify preload.js In preload.js, use contextBridge and webUtils to expose a new method getPathForFile.
import { contextBridge, ipcRenderer, webUtils } from 'electron';
contextBridge.exposeInMainWorld('api', {
     getFilePath: (file) => {
         const path = webUtils.getPathForFile(file);
         return path;
     },
 });
  1. Modify App.vue Add the following HTML for the drag-and-drop area:
<#div style="border: 1px dashed var(--color-fill-4);
      height: 120px;
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
      align-content: center;
      text-align: center;" @dragover.prevent 
@drop.prevent="handleDrop" 
@dragenter="handleDragEnter" 
@dragleave="handleDragLeave">Drag the file here</#div>

Script Section Add the following script to handle the file drop:

const handleDrop = async (event) => {
  event.preventDefault(); // Prevent default behavior

  const items = event.dataTransfer.items; // Get the dragged file items
  const filePaths = [];

  for (let i = 0; i < items.length; i++) {
    const file = items[i].getAsFile(); // Get the file object
    if (file) {
      const filePath = await window.api.getFilePath(file);
      console.log('filePath::: ', filePath);
      filePaths.push(filePath); // Get the absolute file path
    }
  }
};

Upvotes: 0

Rafax
Rafax

Reputation: 11

solution to get the actual path to the files on the system

[Electron Docs] (https://www.electronjs.org/docs/latest/api/web-utils)

Upvotes: 1

Related Questions