Electron - Download a file to a specific location

avi12 picture avi12 · Sep 7, 2017 · Viewed 24.5k times · Source

I need to download a file to a specific location in my Electron program.
I tried implementing this API but failed.
Then I tried implementing the official API, but couldn't realize how to actually start downloading the file.

How can I download a file to a specific location, say C:\Folder?
Thanks!

Answer

avi12 picture avi12 · Jan 12, 2018

I ended up using electron-dl.
To send a download request (from the renderer.js):

ipcRenderer.send("download", {
    url: "URL is here",
    properties: {directory: "Directory is here"}
});

In the main.js, your code would look something like this:

const {app, BrowserWindow, ipcMain} = require("electron");
const {download} = require("electron-dl");
let window;
app.on("ready", () => {
    window = new BrowserWindow({
        width: someWidth,
        height: someHeight
    });
    window.loadURL(`file://${__dirname}/index.html`);
    ipcMain.on("download", (event, info) => {
        download(BrowserWindow.getFocusedWindow(), info.url, info.properties)
            .then(dl => window.webContents.send("download complete", dl.getSavePath()));
    });
});

The "download complete" listener is in the renderer.js, and would look like:

const {ipcRenderer} = require("electron");
ipcRenderer.on("download complete", (event, file) => {
    console.log(file); // Full file path
});

If you want to track your download's progress:

In main.js:

ipcMain.on("download", (event, info) => {
    info.properties.onProgress = status => window.webContents.send("download progress", status);
    download(BrowserWindow.getFocusedWindow(), info.url, info.properties)
        .then(dl => window.webContents.send("download complete", dl.getSavePath()));
});

In renderer.js:

ipcRenderer.on("download progress", (event, progress) => {
    console.log(progress); // Progress in fraction, between 0 and 1
    const progressInPercentages = progress * 100; // With decimal point and a bunch of numbers
    const cleanProgressInPercentages = Math.floor(progress * 100); // Without decimal point
});