How to drop a file from explorer and get it's full path to electronjs app

Question

I am using electron forge with typescript integration.

I can't find a solution to drag and drop files from explorer and get their full paths

I put in index.ts the following:

import {app, BrowserWindow, ipcMain} from 'electron';

ipcMain.on('ondragstart', (event, filepath) => {
    console.log("ondragstart " + filepath); // doesn't work
});

but doesn't show anything when I drag n drop files

any ideas?

Sheryl

And do you define ondragstart in your renderer process by sending the filepath using ipcRenderer? That event won't appear out of thin air. Take a look at Electron's file d'n'd example, maybe that'll help. – Disencumber

Answer 1

First of all you need to grasp some concepts:

• HTML5 File API
• Sending Messages using ipcMain and ipcRenderer

Action happens on the renderer which gets the dropped files using HTML5 FIle API and passes file paths to main using electron's IPC.

renderer.js

document.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
});

document.addEventListener('drop', (event) => {
    event.preventDefault();
    event.stopPropagation();

    let pathArr = [];
    for (const f of event.dataTransfer.files) {
        // Using the path attribute to get absolute file path
        console.log('File Path of dragged files: ', f.path)
        pathArr.push(f.path); // assemble array for main.js
    }
    console.log(pathArr);
    const ret = ipcRenderer.sendSync('dropped-file', pathArr);
    console.log(ret);
});

main.js

let winmain;

function createWindow () {
    winMain = new BrowserWindow({
        width: 1280,
        height: 720,
        webPreferences: {
            contextIsolation: false,
            nodeIntegration: true
        }
    })
    winMain.loadFile('index.html');
}



ipcMain.on('dropped-file', (event, arg) => {
    console.log('Dropped File(s):', arg);
    event.returnValue = `Received ${arg.length} paths.`; // Synchronous reply
})

Sphygmoid

thanks for your very clean and working solution! – Sheryl

File.path has been removed in electron v32 in favor of the webUtils API – Pico

Answer 2

The selected answer doesn't work for me, because the property has been deprecated in favor of the webUtils API. Usage:

// preload.js
const { webUtils } = require('electron')
const path = webUtils.getPathForFile(document.querySelector('input').files[0])

Important: this only works if placed in the preload script, not in the renderer process nor the main process.

Pico

Answer 3

Electron v32 is not allowing file.path for security issue. To get dropped file path or file path from input[type='file'] on renderer window, we can use webUtils.getPathForFile api from electron.

    const {ipcRenderer,webUtils} = require('electron');
    
    function messageMediaPreviewDrop(event){
        event.stopPropagation();
        event.preventDefault();   
        const fileList = [];
        for(i=0;i<event.dataTransfer.files.length;i++){
            fileList.push({
                path: webUtils.getPathForFile(event.dataTransfer.files[i]), 
                name: event.dataTransfer.files[i].name, 
                type: event.dataTransfer.files[i].type, 
                size: event.dataTransfer.files[i].size
           })
        }
        if(fileList.length>0)//do your code to save or send;
    }

Ref: https://www.electronjs.org/docs/latest/api/web-utils

Anchylose