Cannot drag file onto Electron app dock icon

Question

I want to try to build out a simple Electron based macOS app that let's a user drag a file to the app's dock icon and then does something with that file.

However I cannot find a way to drag a file to the dock icon and detect that event. I notice that when I hover over the dock icon with the file it doesn't look like I can drag it there (the icon doesn't go darker as it does with with Safari or Notes).

I followed the official Quick Start guide to create a minimal electron app for starter.

I found little guidance on what a would like to do but came up with the following code that is able to open the window, load my blank index.html but doesn't achieve anything drag related.

main.js

const { app, BrowserWindow } = require("electron");

/* Create and open the App */

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: "hidden",
  });

  //win.loadURL("https://electronjs.org");
  win.loadFile("index.html");
  win.show();

  process.argv.forEach(handleFile);

  console.log("window opened");
  console.log(process.argv);
};

/* Drag file unto App icon */

app.on("open-file", handleFile);
app.on("open-url", handleFile);

// You can get the dragged file's path like this
if (process.argv.length >= 2) {
  const filePath = process.argv[1];
  handleFile(filePath);
}

// If you only allow a single instance of your application to be running
// you should use the 'second-instance' event to handle the case if your app is already running
const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
  app.quit();
} else {
  app.on("second-instance", (event, argv, workingDirectory) => {
    // Someone tried to run a second instance
    // Handle argv here
    if (argv.length >= 2) {
      const filePath = argv[1];
      handleFile(filePath);
    }
  });
}

function handleFile(filePath) {
  // handle the file as you want
  console.log("handleFile", filePath);
}

Thanks for any guidance in a good direction! Aaron

Cannot drag file onto Electron app dock icon

0 Answers