Enabled large file downloads for desktop users within the query tool. #3369

Author: adityatoshniwal

docs/en_US/release_notes_9_4.rst

@@ -20,6 +20,7 @@ Bundled PostgreSQL Utilities
 New features
 ************
 
+  | `Issue #3369 <https://github.com/pgadmin-org/pgadmin4/issues/3369>`_ -  Enabled large file downloads for desktop users within the query tool.
   | `Issue #8583 <https://github.com/pgadmin-org/pgadmin4/issues/8583>`_ -  Add all missing options to the Import/Export Data functionality, and update the syntax of the COPY command to align with the latest standards.
   | `Issue #8681 <https://github.com/pgadmin-org/pgadmin4/issues/8681>`_ -  Add support for exporting table data based on a custom query.
 

runtime/.eslintrc.js

@@ -8,6 +8,7 @@
 //////////////////////////////////////////////////////////////
 import globals from 'globals';
 import js from '@eslint/js';
+import unusedImports from 'eslint-plugin-unused-imports';
 
 export default [
   js.configs.recommended,
@@ -34,6 +35,9 @@ export default [
         'platform': 'readonly',
       },
     },
+    'plugins': {
+      'unused-imports': unusedImports,
+    },
     'rules': {
       'indent': [
         'error',
@@ -55,6 +59,17 @@ export default [
       'no-console': ['error', { allow: ['warn', 'error'] }],
       // We need to exclude below for RegEx case
       'no-useless-escape': 0,
+      'no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          'vars': 'all',
+          'varsIgnorePattern': '^_',
+          'args': 'after-used',
+          'argsIgnorePattern': '^_',
+        },
+      ],
     },
   },
 ];

runtime/package.json

@@ -13,12 +13,12 @@
   "packageManager": "yarn@3.8.7",
   "devDependencies": {
     "electron": "36.2.0",
-    "eslint": "^9.26.0"
+    "eslint": "^9.26.0",
+    "eslint-plugin-unused-imports": "^4.1.4"
   },
   "dependencies": {
     "axios": "^1.9.0",
     "electron-context-menu": "^4.0.5",
-    "electron-dl": "^4.0.0",
-    "electron-store": "^10.0.0"
+    "electron-store": "^10.0.1"
   }
 }

runtime/src/js/downloader.js

@@ -0,0 +1,121 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2025, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import { app, ipcMain, dialog, BrowserWindow, shell } from 'electron';
+import fs from 'fs';
+import path from 'path';
+import { setBadge, clearBadge, clearProgress, setProgress } from './progress.js';
+import { writeServerLog } from './misc.js';
+
+class DownloadItem {
+  constructor(filePath, onUpdate, onRemove) {
+    this.filePath = filePath;
+    this.currentLoaded = 0;
+    this.total = null;
+    this.stream = fs.createWriteStream(filePath);;
+    this.onUpdate = onUpdate;
+    this.onRemove = onRemove;
+  }
+  write(chunk) {
+    this.stream.write(chunk);
+    this.currentLoaded += chunk.length;
+    this.onUpdate?.();
+  }
+  setTotal(total) {
+    this.total = total;
+  }
+  remove() {
+    this.stream.end();
+    this.onRemove?.();
+  }
+}
+
+const downloadQueue = {};
+
+function updateProgress(callerWindow) {
+  let count = Object.keys(downloadQueue).length;
+  if (count === 0) {
+    clearBadge();
+    clearProgress.call(callerWindow);
+    return;
+  }
+  setBadge(Object.keys(downloadQueue).length);
+  let progress = 0;
+  if(Object.values(downloadQueue).some((item) => item.total === null)) {
+    // If any of the items in the queue does not have a total, we cannot calculate progress
+    // so we return 2 to indicate that the progress is indeterminate.
+    progress = 2;
+  } else {
+    const total = Object.values(downloadQueue).reduce((acc, item) => {
+      if (item.total) {
+        return acc + item.currentLoaded / item.total;
+      }
+      return acc + item.currentLoaded;
+    }, 0);
+    progress = total / Object.keys(downloadQueue).length;
+  }
+  setProgress.call(callerWindow, progress);
+}
+
+export function setupDownloader() {
+  // Listen for the renderer's request to show the open dialog
+  ipcMain.handle('get-download-path', async (event, options, prompt=true) => {
+    try {
+      let filePath = path.join(app.getPath('downloads'), options.defaultPath);
+      const callerWindow = BrowserWindow.fromWebContents(event.sender);
+      // prompt is true when the user has set the preference to prompt for download location
+      if(prompt) {
+        const result = await dialog.showSaveDialog(callerWindow, {
+          title: 'Save File',
+          ...options,
+        });
+
+        if (result.canceled) {
+          return;
+        }
+        filePath = result.filePath;
+      }
+
+      downloadQueue[filePath] = new DownloadItem(filePath, () => {
+        updateProgress(callerWindow);
+      }, () => {
+        delete downloadQueue[filePath];
+        updateProgress(callerWindow);
+      });
+
+      updateProgress(callerWindow);
+
+      return filePath;
+    } catch (error) {
+      writeServerLog(`Error in get-download-path: ${error}`);
+    } 
+  });
+
+  ipcMain.on('download-data-save-total', (event, filePath, total) => {
+    const item = downloadQueue[filePath];
+    if (item) {
+      item.setTotal(total);
+    }
+  });
+
+  ipcMain.on('download-data-save-chunk', (event, filePath, chunk) => {
+    const item = downloadQueue[filePath];
+    if (item) {
+      item.write(chunk);
+    }
+  });
+
+  ipcMain.on('download-data-save-end', (event, filePath, openFile=false) => {
+    const item = downloadQueue[filePath];
+    if (item) {
+      item.remove();
+      openFile && shell.openPath(filePath);
+    }
+  });
+}

runtime/src/js/pgadmin.js

@@ -16,7 +16,7 @@ import { spawn } from 'child_process';
 import { fileURLToPath } from 'url';
 import { setupMenu } from './menu.js';
 import contextMenu from 'electron-context-menu';
-import { CancelError, download } from 'electron-dl';
+import { setupDownloader } from './downloader.js';
 
 const configStore = new Store({
   defaults: {
@@ -153,28 +153,6 @@ function reloadApp() {
   currWin.webContents.reload();
 }
 
-async function desktopFileDownload(payload) {
-  const currWin = BrowserWindow.getFocusedWindow();
-  try {
-    await download(currWin, payload.downloadUrl, {
-      filename: payload.fileName,
-      saveAs: payload.prompt_for_download_location,
-      onProgress: (progress) => {
-        currWin.webContents.send('download-progress', progress);
-      },
-      onCompleted: (item) => {
-        currWin.webContents.send('download-complete', item);
-        if (payload.automatically_open_downloaded_file)
-          shell.openPath(item.path);
-      },
-    });
-  } catch (error) {
-    if (!(error instanceof CancelError)) {
-      misc.writeServerLog(error);
-    }
-  }
-}
-
 // This functions is used to start the pgAdmin4 server by spawning a
 // separate process.
 function startDesktopMode() {
@@ -192,8 +170,9 @@ function startDesktopMode() {
   process.env.PGADMIN_SERVER_MODE = 'OFF';
 
   // Start Page URL
-  startPageUrl = 'http://127.0.0.1:' + serverPort + '/?key=' + UUID;
-  serverCheckUrl = 'http://127.0.0.1:' + serverPort + '/misc/ping?key=' + UUID;
+  const baseUrl = `http://127.0.0.1:${serverPort}`;
+  startPageUrl = `${baseUrl}/?key=${UUID}`;
+  serverCheckUrl = `${baseUrl}/misc/ping?key=${UUID}`;
 
   // Write Python Path, pgAdmin file path and command in log file.
   misc.writeServerLog('pgAdmin Runtime Environment');
@@ -356,6 +335,8 @@ function launchPgAdminWindow() {
     'reloadApp': reloadApp,
   });
 
+  setupDownloader();
+
   pgAdminMainScreen.loadURL(startPageUrl);
 
   const bounds = configStore.get('bounds');
@@ -429,7 +410,6 @@ ipcMain.on('log', (text) => ()=>{
   misc.writeServerLog(text);
 });
 ipcMain.on('reloadApp', reloadApp);
-ipcMain.on('onFileDownload', (_, payload) => desktopFileDownload(payload));
 ipcMain.handle('checkPortAvailable', async (_e, fixedPort)=>{
   try {
     await misc.getAvailablePort(fixedPort);

runtime/src/js/pgadmin_preload.js

@@ -24,5 +24,9 @@ contextBridge.exposeInMainWorld('electronUI', {
   showSaveDialog: (options) => ipcRenderer.invoke('showSaveDialog', options),
   log: (text)=> ipcRenderer.send('log', text),
   reloadApp: ()=>{ipcRenderer.send('reloadApp');},
-  onFileDownload: (payload) => ipcRenderer.send('onFileDownload', payload),
+  // Download related functions
+  getDownloadPath: (...args) => ipcRenderer.invoke('get-download-path', ...args),
+  downloadDataSaveChunk: (...args) => ipcRenderer.send('download-data-save-chunk', ...args),
+  downloadDataSaveTotal: (...args) => ipcRenderer.send('download-data-save-total', ...args),
+  downloadDataSaveEnd: (...args) => ipcRenderer.send('download-data-save-end', ...args),
 });

runtime/src/js/progress.js

@@ -0,0 +1,39 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2025, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import { app } from 'electron';
+
+export function setBadge(count) {
+  const badgeCount = parseInt(count, 10);
+  if (!isNaN(badgeCount)) {
+    app.setBadgeCount(badgeCount);
+  }
+}
+
+// Function to clear badge
+export function clearBadge() {
+  app.setBadgeCount(0);
+}
+
+// Function to set progress bar
+export function setProgress(progress) {
+  const progressValue = parseFloat(progress);
+  if (this && !isNaN(progressValue) && progressValue >= 0 && progressValue <= 1) {
+    this.setProgressBar(progressValue);
+  } else if (this && progress === -1) {
+    this.setProgressBar(-1);
+  }
+}
+
+// Function to clear progress
+export function clearProgress() {
+  if (this) {
+    this.setProgressBar(-1);
+  }
+}

runtime/yarn.lock

@@ -751,7 +751,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-store@npm:^10.0.0":
+"electron-store@npm:^10.0.1":
   version: 10.0.1
   resolution: "electron-store@npm:10.0.1"
   dependencies:
@@ -881,6 +881,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-unused-imports@npm:^4.1.4":
+  version: 4.1.4
+  resolution: "eslint-plugin-unused-imports@npm:4.1.4"
+  peerDependencies:
+    "@typescript-eslint/eslint-plugin": ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
+    eslint: ^9.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    "@typescript-eslint/eslint-plugin":
+      optional: true
+  checksum: 1f4ce3e3972699345513840f3af1b783033dbc3a3e85b62ce12b3f6a89fd8c92afe46d0c00af40bacb14465445983ba0ccc326a6fd5132553061fb0e47bcba19
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:^8.3.0":
   version: 8.3.0
   resolution: "eslint-scope@npm:8.3.0"
@@ -1886,9 +1899,9 @@ __metadata:
     axios: ^1.9.0
     electron: 36.2.0
     electron-context-menu: ^4.0.5
-    electron-dl: ^4.0.0
-    electron-store: ^10.0.0
+    electron-store: ^10.0.1
     eslint: ^9.26.0
+    eslint-plugin-unused-imports: ^4.1.4
   languageName: unknown
   linkType: soft
 

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -40,7 +40,7 @@ import Replication from './Replication';
 import { getExpandCell } from '../../../static/js/components/PgReactTableStyled';
 import CodeMirror from '../../../static/js/components/ReactCodeMirror';
 import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded';
-import { downloadFile } from '../../../static/js/utils';
+import { downloadTextData } from '../../../static/js/download_utils';
 import RefreshButton from './components/RefreshButtons';
 
 function parseData(data) {
@@ -451,7 +451,7 @@ function Dashboard({
     let fileName = 'data-' + new Date().getTime() + extension;
 
     try {
-      downloadFile(respData, fileName, `text/${type}`);
+      downloadTextData(respData, fileName, `text/${type}`);
     } catch {
       setSsMsg(gettext('Failed to download the logs.'));
     }

web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx

@@ -32,7 +32,7 @@ import Uploader from './Uploader';
 import GridView from './GridView';
 import convert from 'convert-units';
 import PropTypes from 'prop-types';
-import { downloadBlob } from '../../../../../static/js/utils';
+import { downloadBlob } from '../../../../../static/js/download_utils';
 import ErrorBoundary from '../../../../../static/js/helpers/ErrorBoundary';
 import { MY_STORAGE } from './FileManagerConstants';
 import _ from 'lodash';