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
?
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.
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.
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.
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
});
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
});
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"})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With