Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Electron - Download a file to a specific location

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?

like image 999
avi12 Avatar asked Sep 07 '17 18:09

avi12


People also ask

How do I download an Electron file?

There are lots of solutions in renderer (Browser), you can use simple <a href="link" download /> or fetch Api or third party libraries. You can get buffer or blob using fetch which is what you need. const response = await fetch(url); const file = await response.

Can Electron access local files?

One great benefit of using Electron is the ability to access the user's file system. This enables you to read and write files on the local system.

Can Electron apps be fast?

Fast Development Time This is because frameworks allow developers to focus on the unique parts of the code without having to code every small, fundamental aspect of the application. Electron apps can be developed even quicker than many other frameworks allow because they are written in JavaScript.


2 Answers

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
});
like image 169
avi12 Avatar answered Sep 16 '22 15:09

avi12


as you mentioned yourself, electron-dl seems to be the popular way to do that. Mainly from the github page: npm i -S electron-dl

const {BrowserWindow} = require('electron');
const {download} = require('electron-dl');
download(BrowserWindow.getFocusedWindow(), "http://url-to-asset", {directory:"c:/Folder"})
like image 33
user2520818 Avatar answered Sep 16 '22 15:09

user2520818