feat(remote): 实现文件上传真实进度显示

- 使用分块上传替代一次性上传 - 调用 /upload/start → /upload/chunk → /upload/merge 接口 - 通过 IPC 事件实时推送上传进度到前端 - 修复 merge 时未使用目标路径的问题
feat(remote): 实现文件下载真实进度显示
2026-03-10 15:36:10 +08:00 · 2026-03-10 14:59:11 +08:00
10 changed files with 240 additions and 61 deletions
--- a/dist-electron/main.js
+++ b/dist-electron/main.js
@@ -316,7 +316,7 @@ ipcMain.handle("remote-fetch-files", async (_event, serverHost, port, filePath,
    return { success: false, error: error.message };
  }
 });
-ipcMain.handle("remote-upload-file", async (_event, serverHost, port, filePath, remotePath, password) => {
+ipcMain.handle("remote-upload-file", async (_event, id, serverHost, port, filePath, remotePath, password) => {
  try {
    const win = electronState.getMainWindow();
    if (!win) {
@@ -326,24 +326,54 @@ ipcMain.handle("remote-upload-file", async (_event, serverHost, port, filePath,
    if (!fs2.existsSync(fullPath)) {
      throw new Error("File not found");
    }
-    const fileBuffer = fs2.readFileSync(fullPath);
+    const stats = fs2.statSync(fullPath);
+    const fileSize = stats.size;
    const fileName = path2.basename(fullPath);
-    let url = `http://${serverHost}:${port}/api/files/upload`;
+    let url = `http://${serverHost}:${port}/api/files/upload/start`;
    if (password) {
      url += `?password=${encodeURIComponent(password)}`;
    }
-    const formData = new FormData();
-    const blob = new Blob([fileBuffer]);
-    formData.append("file", blob, fileName);
-    if (remotePath) {
-      formData.append("path", remotePath);
-    }
-    const response = await fetch(url, {
+    const startResponse = await fetch(url, {
      method: "POST",
-      body: formData
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ filename: fileName, fileSize })
    });
-    if (!response.ok) {
-      throw new Error(`Upload failed: ${response.statusText}`);
+    if (!startResponse.ok) {
+      throw new Error(`Failed to start upload: ${startResponse.statusText}`);
+    }
+    const { fileId, chunkSize } = await startResponse.json();
+    const CHUNK_SIZE = chunkSize || 64 * 1024;
+    const totalChunks = Math.ceil(fileSize / CHUNK_SIZE);
+    const readStream = fs2.createReadStream(fullPath, { highWaterMark: CHUNK_SIZE });
+    let chunkIndex = 0;
+    let uploadedBytes = 0;
+    for await (const chunk of readStream) {
+      const formData = new FormData();
+      const blob = new Blob([chunk]);
+      formData.append("chunk", blob, fileName);
+      formData.append("fileId", fileId);
+      formData.append("chunkIndex", chunkIndex.toString());
+      const chunkUrl = `http://${serverHost}:${port}/api/files/upload/chunk${password ? `?password=${encodeURIComponent(password)}` : ""}`;
+      const chunkResponse = await fetch(chunkUrl, {
+        method: "POST",
+        body: formData
+      });
+      if (!chunkResponse.ok) {
+        throw new Error(`Failed to upload chunk ${chunkIndex}: ${chunkResponse.statusText}`);
+      }
+      uploadedBytes += chunk.length;
+      const progress = Math.round(uploadedBytes / fileSize * 100);
+      win.webContents.send("upload-progress", { id, progress });
+      chunkIndex++;
+    }
+    const mergeUrl = `http://${serverHost}:${port}/api/files/upload/merge${password ? `?password=${encodeURIComponent(password)}` : ""}`;
+    const mergeResponse = await fetch(mergeUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ fileId, totalChunks, filename: fileName, path: remotePath })
+    });
+    if (!mergeResponse.ok) {
+      throw new Error(`Failed to merge chunks: ${mergeResponse.statusText}`);
    }
    return { success: true };
  } catch (error) {
@@ -351,9 +381,9 @@ ipcMain.handle("remote-upload-file", async (_event, serverHost, port, filePath,
    return { success: false, error: error.message };
  }
 });
-ipcMain.handle("remote-download-file", async (_event, serverHost, port, fileName, remotePath, localPath, password) => {
+ipcMain.handle("remote-download-file", async (_event, id, serverHost, port, fileName, remotePath, localPath, password) => {
  try {
-    log2.info("Remote download params:", { serverHost, port, fileName, remotePath, localPath, password });
+    log2.info("Remote download params:", { id, serverHost, port, fileName, remotePath, localPath, password });
    const win = electronState.getMainWindow();
    if (!win) {
      throw new Error("No window found");
@@ -367,13 +397,36 @@ ipcMain.handle("remote-download-file", async (_event, serverHost, port, fileName
    if (!response.ok) {
      throw new Error(`Download failed: ${response.statusText}`);
    }
-    const buffer = await response.arrayBuffer();
+    const contentLength = response.headers.get("Content-Length");
+    if (!contentLength) {
+      throw new Error("Server did not return Content-Length");
+    }
+    const totalSize = parseInt(contentLength, 10);
    const targetDir = localPath || "C:\\";
    const targetPath = path2.join(targetDir, fileName);
    if (!fs2.existsSync(targetDir)) {
      fs2.mkdirSync(targetDir, { recursive: true });
    }
-    fs2.writeFileSync(targetPath, Buffer.from(buffer));
+    const fileStream = fs2.createWriteStream(targetPath);
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error("Failed to get response body reader");
+    }
+    let downloadedSize = 0;
+    const CHUNK_SIZE = 64 * 1024;
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      if (value) {
+        downloadedSize += value.length;
+        fileStream.write(value);
+        const progress = Math.round(downloadedSize / totalSize * 100);
+        win.webContents.send("download-progress", { id, progress });
+      }
+    }
+    fileStream.end();
    return { success: true, filePath: targetPath };
  } catch (error) {
    log2.error("Remote download failed:", error);
--- a/dist-electron/main.js.map
+++ b/dist-electron/main.js.map
--- a/dist-electron/preload.cjs
+++ b/dist-electron/preload.cjs
@@ -18,11 +18,21 @@ import_electron.contextBridge.exposeInMainWorld("electronAPI", {
    import_electron.ipcRenderer.on("remote-clipboard-auto-sync", handler);
    return () => import_electron.ipcRenderer.removeListener("remote-clipboard-auto-sync", handler);
  },
+  onDownloadProgress: (callback) => {
+    const handler = (_event, data) => callback(data);
+    import_electron.ipcRenderer.on("download-progress", handler);
+    return () => import_electron.ipcRenderer.removeListener("download-progress", handler);
+  },
+  onUploadProgress: (callback) => {
+    const handler = (_event, data) => callback(data);
+    import_electron.ipcRenderer.on("upload-progress", handler);
+    return () => import_electron.ipcRenderer.removeListener("upload-progress", handler);
+  },
  clipboardReadText: () => import_electron.ipcRenderer.invoke("clipboard-read-text"),
  clipboardWriteText: (text) => import_electron.ipcRenderer.invoke("clipboard-write-text", text),
  remoteFetchDrives: (serverHost, port, password) => import_electron.ipcRenderer.invoke("remote-fetch-drives", serverHost, port, password),
  remoteFetchFiles: (serverHost, port, filePath, password) => import_electron.ipcRenderer.invoke("remote-fetch-files", serverHost, port, filePath, password),
-  remoteUploadFile: (serverHost, port, filePath, remotePath, password) => import_electron.ipcRenderer.invoke("remote-upload-file", serverHost, port, filePath, remotePath, password),
-  remoteDownloadFile: (serverHost, port, fileName, remotePath, localPath, password) => import_electron.ipcRenderer.invoke("remote-download-file", serverHost, port, fileName, remotePath, localPath, password)
+  remoteUploadFile: (id, serverHost, port, filePath, remotePath, password) => import_electron.ipcRenderer.invoke("remote-upload-file", id, serverHost, port, filePath, remotePath, password),
+  remoteDownloadFile: (id, serverHost, port, fileName, remotePath, localPath, password) => import_electron.ipcRenderer.invoke("remote-download-file", id, serverHost, port, fileName, remotePath, localPath, password)
 });
 //# sourceMappingURL=preload.cjs.map
--- a/dist-electron/preload.cjs.map
+++ b/dist-electron/preload.cjs.map
@@ -1 +1 @@
-{"version":3,"sources":["../electron/preload.ts"],"sourcesContent":["import { contextBridge, ipcRenderer } from 'electron'\r\n\r\nconsole.log('--- PRELOAD SCRIPT LOADED SUCCESSFULLY ---')\r\n\r\ncontextBridge.exposeInMainWorld('electronAPI', {\r\n  exportPDF: (title: string, htmlContent?: string) => ipcRenderer.invoke('export-pdf', title, htmlContent),\r\n  selectHtmlFile: () => ipcRenderer.invoke('select-html-file'),\r\n  updateTitlebarButtons: (symbolColor: string) => ipcRenderer.invoke('update-titlebar-buttons', symbolColor),\r\n  onRemoteClipboardSyncToRemote: (callback: () => void) => {\r\n    ipcRenderer.on('remote-clipboard-sync-to-remote', callback);\r\n    return () => ipcRenderer.removeListener('remote-clipboard-sync-to-remote', callback);\r\n  },\r\n  onRemoteClipboardSyncFromRemote: (callback: () => void) => {\r\n    ipcRenderer.on('remote-clipboard-sync-from-remote', callback);\r\n    return () => ipcRenderer.removeListener('remote-clipboard-sync-from-remote', callback);\r\n  },\r\n  onRemoteClipboardAutoSync: (callback: (text: string) => void) => {\r\n    const handler = (_event: Electron.IpcRendererEvent, text: string) => callback(text);\r\n    ipcRenderer.on('remote-clipboard-auto-sync', handler);\r\n    return () => ipcRenderer.removeListener('remote-clipboard-auto-sync', handler);\r\n  },\r\n  clipboardReadText: () => ipcRenderer.invoke('clipboard-read-text'),\r\n  clipboardWriteText: (text: string) => ipcRenderer.invoke('clipboard-write-text', text),\r\n  remoteFetchDrives: (serverHost: string, port: number, password?: string) => \r\n    ipcRenderer.invoke('remote-fetch-drives', serverHost, port, password),\r\n  remoteFetchFiles: (serverHost: string, port: number, filePath: string, password?: string) => \r\n    ipcRenderer.invoke('remote-fetch-files', serverHost, port, filePath, password),\r\n  remoteUploadFile: (serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => \r\n    ipcRenderer.invoke('remote-upload-file', serverHost, port, filePath, remotePath, password),\r\n  remoteDownloadFile: (serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => \r\n    ipcRenderer.invoke('remote-download-file', serverHost, port, fileName, remotePath, localPath, password),\r\n})\r\n"],"mappings":";AAAA,sBAA2C;AAE3C,QAAQ,IAAI,4CAA4C;AAExD,8BAAc,kBAAkB,eAAe;AAAA,EAC7C,WAAW,CAAC,OAAe,gBAAyB,4BAAY,OAAO,cAAc,OAAO,WAAW;AAAA,EACvG,gBAAgB,MAAM,4BAAY,OAAO,kBAAkB;AAAA,EAC3D,uBAAuB,CAAC,gBAAwB,4BAAY,OAAO,2BAA2B,WAAW;AAAA,EACzG,+BAA+B,CAAC,aAAyB;AACvD,gCAAY,GAAG,mCAAmC,QAAQ;AAC1D,WAAO,MAAM,4BAAY,eAAe,mCAAmC,QAAQ;AAAA,EACrF;AAAA,EACA,iCAAiC,CAAC,aAAyB;AACzD,gCAAY,GAAG,qCAAqC,QAAQ;AAC5D,WAAO,MAAM,4BAAY,eAAe,qCAAqC,QAAQ;AAAA,EACvF;AAAA,EACA,2BAA2B,CAAC,aAAqC;AAC/D,UAAM,UAAU,CAAC,QAAmC,SAAiB,SAAS,IAAI;AAClF,gCAAY,GAAG,8BAA8B,OAAO;AACpD,WAAO,MAAM,4BAAY,eAAe,8BAA8B,OAAO;AAAA,EAC/E;AAAA,EACA,mBAAmB,MAAM,4BAAY,OAAO,qBAAqB;AAAA,EACjE,oBAAoB,CAAC,SAAiB,4BAAY,OAAO,wBAAwB,IAAI;AAAA,EACrF,mBAAmB,CAAC,YAAoB,MAAc,aACpD,4BAAY,OAAO,uBAAuB,YAAY,MAAM,QAAQ;AAAA,EACtE,kBAAkB,CAAC,YAAoB,MAAc,UAAkB,aACrE,4BAAY,OAAO,sBAAsB,YAAY,MAAM,UAAU,QAAQ;AAAA,EAC/E,kBAAkB,CAAC,YAAoB,MAAc,UAAkB,YAAoB,aACzF,4BAAY,OAAO,sBAAsB,YAAY,MAAM,UAAU,YAAY,QAAQ;AAAA,EAC3F,oBAAoB,CAAC,YAAoB,MAAc,UAAkB,YAAoB,WAAmB,aAC9G,4BAAY,OAAO,wBAAwB,YAAY,MAAM,UAAU,YAAY,WAAW,QAAQ;AAC1G,CAAC;","names":[]}
+{"version":3,"sources":["../electron/preload.ts"],"sourcesContent":["import { contextBridge, ipcRenderer } from 'electron'\r\n\r\nconsole.log('--- PRELOAD SCRIPT LOADED SUCCESSFULLY ---')\r\n\r\ncontextBridge.exposeInMainWorld('electronAPI', {\r\n  exportPDF: (title: string, htmlContent?: string) => ipcRenderer.invoke('export-pdf', title, htmlContent),\r\n  selectHtmlFile: () => ipcRenderer.invoke('select-html-file'),\r\n  updateTitlebarButtons: (symbolColor: string) => ipcRenderer.invoke('update-titlebar-buttons', symbolColor),\r\n  onRemoteClipboardSyncToRemote: (callback: () => void) => {\r\n    ipcRenderer.on('remote-clipboard-sync-to-remote', callback);\r\n    return () => ipcRenderer.removeListener('remote-clipboard-sync-to-remote', callback);\r\n  },\r\n  onRemoteClipboardSyncFromRemote: (callback: () => void) => {\r\n    ipcRenderer.on('remote-clipboard-sync-from-remote', callback);\r\n    return () => ipcRenderer.removeListener('remote-clipboard-sync-from-remote', callback);\r\n  },\r\n  onRemoteClipboardAutoSync: (callback: (text: string) => void) => {\r\n    const handler = (_event: Electron.IpcRendererEvent, text: string) => callback(text);\r\n    ipcRenderer.on('remote-clipboard-auto-sync', handler);\r\n    return () => ipcRenderer.removeListener('remote-clipboard-auto-sync', handler);\r\n  },\r\n  onDownloadProgress: (callback: (data: { progress: number; id: string }) => void) => {\r\n    const handler = (_event: Electron.IpcRendererEvent, data: { progress: number; id: string }) => callback(data);\r\n    ipcRenderer.on('download-progress', handler);\r\n    return () => ipcRenderer.removeListener('download-progress', handler);\r\n  },\r\n  onUploadProgress: (callback: (data: { progress: number; id: string }) => void) => {\r\n    const handler = (_event: Electron.IpcRendererEvent, data: { progress: number; id: string }) => callback(data);\r\n    ipcRenderer.on('upload-progress', handler);\r\n    return () => ipcRenderer.removeListener('upload-progress', handler);\r\n  },\r\n  clipboardReadText: () => ipcRenderer.invoke('clipboard-read-text'),\r\n  clipboardWriteText: (text: string) => ipcRenderer.invoke('clipboard-write-text', text),\r\n  remoteFetchDrives: (serverHost: string, port: number, password?: string) => \r\n    ipcRenderer.invoke('remote-fetch-drives', serverHost, port, password),\r\n  remoteFetchFiles: (serverHost: string, port: number, filePath: string, password?: string) => \r\n    ipcRenderer.invoke('remote-fetch-files', serverHost, port, filePath, password),\r\n  remoteUploadFile: (id: string, serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => \r\n    ipcRenderer.invoke('remote-upload-file', id, serverHost, port, filePath, remotePath, password),\r\n  remoteDownloadFile: (id: string, serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => \r\n    ipcRenderer.invoke('remote-download-file', id, serverHost, port, fileName, remotePath, localPath, password),\r\n})\r\n"],"mappings":";AAAA,sBAA2C;AAE3C,QAAQ,IAAI,4CAA4C;AAExD,8BAAc,kBAAkB,eAAe;AAAA,EAC7C,WAAW,CAAC,OAAe,gBAAyB,4BAAY,OAAO,cAAc,OAAO,WAAW;AAAA,EACvG,gBAAgB,MAAM,4BAAY,OAAO,kBAAkB;AAAA,EAC3D,uBAAuB,CAAC,gBAAwB,4BAAY,OAAO,2BAA2B,WAAW;AAAA,EACzG,+BAA+B,CAAC,aAAyB;AACvD,gCAAY,GAAG,mCAAmC,QAAQ;AAC1D,WAAO,MAAM,4BAAY,eAAe,mCAAmC,QAAQ;AAAA,EACrF;AAAA,EACA,iCAAiC,CAAC,aAAyB;AACzD,gCAAY,GAAG,qCAAqC,QAAQ;AAC5D,WAAO,MAAM,4BAAY,eAAe,qCAAqC,QAAQ;AAAA,EACvF;AAAA,EACA,2BAA2B,CAAC,aAAqC;AAC/D,UAAM,UAAU,CAAC,QAAmC,SAAiB,SAAS,IAAI;AAClF,gCAAY,GAAG,8BAA8B,OAAO;AACpD,WAAO,MAAM,4BAAY,eAAe,8BAA8B,OAAO;AAAA,EAC/E;AAAA,EACA,oBAAoB,CAAC,aAA+D;AAClF,UAAM,UAAU,CAAC,QAAmC,SAA2C,SAAS,IAAI;AAC5G,gCAAY,GAAG,qBAAqB,OAAO;AAC3C,WAAO,MAAM,4BAAY,eAAe,qBAAqB,OAAO;AAAA,EACtE;AAAA,EACA,kBAAkB,CAAC,aAA+D;AAChF,UAAM,UAAU,CAAC,QAAmC,SAA2C,SAAS,IAAI;AAC5G,gCAAY,GAAG,mBAAmB,OAAO;AACzC,WAAO,MAAM,4BAAY,eAAe,mBAAmB,OAAO;AAAA,EACpE;AAAA,EACA,mBAAmB,MAAM,4BAAY,OAAO,qBAAqB;AAAA,EACjE,oBAAoB,CAAC,SAAiB,4BAAY,OAAO,wBAAwB,IAAI;AAAA,EACrF,mBAAmB,CAAC,YAAoB,MAAc,aACpD,4BAAY,OAAO,uBAAuB,YAAY,MAAM,QAAQ;AAAA,EACtE,kBAAkB,CAAC,YAAoB,MAAc,UAAkB,aACrE,4BAAY,OAAO,sBAAsB,YAAY,MAAM,UAAU,QAAQ;AAAA,EAC/E,kBAAkB,CAAC,IAAY,YAAoB,MAAc,UAAkB,YAAoB,aACrG,4BAAY,OAAO,sBAAsB,IAAI,YAAY,MAAM,UAAU,YAAY,QAAQ;AAAA,EAC/F,oBAAoB,CAAC,IAAY,YAAoB,MAAc,UAAkB,YAAoB,WAAmB,aAC1H,4BAAY,OAAO,wBAAwB,IAAI,YAAY,MAAM,UAAU,YAAY,WAAW,QAAQ;AAC9G,CAAC;","names":[]}
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -212,7 +212,7 @@ ipcMain.handle('remote-fetch-files', async (_event, serverHost: string, port: nu
  }
 });

-ipcMain.handle('remote-upload-file', async (_event, serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => {
+ipcMain.handle('remote-upload-file', async (_event, id: string, serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => {
  try {
    const win = electronState.getMainWindow();
    if (!win) {
@@ -224,28 +224,66 @@ ipcMain.handle('remote-upload-file', async (_event, serverHost: string, port: nu
      throw new Error('File not found');
    }

-    const fileBuffer = fs.readFileSync(fullPath);
+    const stats = fs.statSync(fullPath);
+    const fileSize = stats.size;
    const fileName = path.basename(fullPath);

-    let url = `http://${serverHost}:${port}/api/files/upload`;
+    let url = `http://${serverHost}:${port}/api/files/upload/start`;
    if (password) {
      url += `?password=${encodeURIComponent(password)}`;
    }

-    const formData = new FormData();
-    const blob = new Blob([fileBuffer]);
-    formData.append('file', blob, fileName);
-    if (remotePath) {
-      formData.append('path', remotePath);
-    }
-
-    const response = await fetch(url, {
+    const startResponse = await fetch(url, {
      method: 'POST',
-      body: formData,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ filename: fileName, fileSize }),
    });

-    if (!response.ok) {
-      throw new Error(`Upload failed: ${response.statusText}`);
+    if (!startResponse.ok) {
+      throw new Error(`Failed to start upload: ${startResponse.statusText}`);
+    }
+
+    const { fileId, chunkSize } = await startResponse.json();
+    const CHUNK_SIZE = chunkSize || (64 * 1024);
+    const totalChunks = Math.ceil(fileSize / CHUNK_SIZE);
+
+    const readStream = fs.createReadStream(fullPath, { highWaterMark: CHUNK_SIZE });
+    let chunkIndex = 0;
+    let uploadedBytes = 0;
+
+    for await (const chunk of readStream) {
+      const formData = new FormData();
+      const blob = new Blob([chunk]);
+      formData.append('chunk', blob, fileName);
+      formData.append('fileId', fileId);
+      formData.append('chunkIndex', chunkIndex.toString());
+
+      const chunkUrl = `http://${serverHost}:${port}/api/files/upload/chunk${password ? `?password=${encodeURIComponent(password)}` : ''}`;
+      const chunkResponse = await fetch(chunkUrl, {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!chunkResponse.ok) {
+        throw new Error(`Failed to upload chunk ${chunkIndex}: ${chunkResponse.statusText}`);
+      }
+
+      uploadedBytes += chunk.length;
+      const progress = Math.round((uploadedBytes / fileSize) * 100);
+      win.webContents.send('upload-progress', { id, progress });
+
+      chunkIndex++;
+    }
+
+    const mergeUrl = `http://${serverHost}:${port}/api/files/upload/merge${password ? `?password=${encodeURIComponent(password)}` : ''}`;
+    const mergeResponse = await fetch(mergeUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ fileId, totalChunks, filename: fileName, path: remotePath }),
+    });
+
+    if (!mergeResponse.ok) {
+      throw new Error(`Failed to merge chunks: ${mergeResponse.statusText}`);
    }

    return { success: true };
@@ -255,9 +293,9 @@ ipcMain.handle('remote-upload-file', async (_event, serverHost: string, port: nu
  }
 });

-ipcMain.handle('remote-download-file', async (_event, serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => {
+ipcMain.handle('remote-download-file', async (_event, id: string, serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => {
  try {
-    log.info('Remote download params:', { serverHost, port, fileName, remotePath, localPath, password });
+    log.info('Remote download params:', { id, serverHost, port, fileName, remotePath, localPath, password });
    
    const win = electronState.getMainWindow();
    if (!win) {
@@ -275,8 +313,12 @@ ipcMain.handle('remote-download-file', async (_event, serverHost: string, port:
      throw new Error(`Download failed: ${response.statusText}`);
    }

-    const buffer = await response.arrayBuffer();
+    const contentLength = response.headers.get('Content-Length');
+    if (!contentLength) {
+      throw new Error('Server did not return Content-Length');
+    }

+    const totalSize = parseInt(contentLength, 10);
    const targetDir = localPath || 'C:\\';
    const targetPath = path.join(targetDir, fileName);

@@ -284,8 +326,31 @@ ipcMain.handle('remote-download-file', async (_event, serverHost: string, port:
      fs.mkdirSync(targetDir, { recursive: true });
    }

-    fs.writeFileSync(targetPath, Buffer.from(buffer));
+    const fileStream = fs.createWriteStream(targetPath);
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error('Failed to get response body reader');
+    }

+    let downloadedSize = 0;
+    const CHUNK_SIZE = 64 * 1024;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+
+      if (value) {
+        downloadedSize += value.length;
+        fileStream.write(value);
+
+        const progress = Math.round((downloadedSize / totalSize) * 100);
+        win.webContents.send('download-progress', { id, progress });
+      }
+    }
+
+    fileStream.end();
    return { success: true, filePath: targetPath };
  } catch (error: any) {
    log.error('Remote download failed:', error);
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -19,14 +19,24 @@ contextBridge.exposeInMainWorld('electronAPI', {
    ipcRenderer.on('remote-clipboard-auto-sync', handler);
    return () => ipcRenderer.removeListener('remote-clipboard-auto-sync', handler);
  },
+  onDownloadProgress: (callback: (data: { progress: number; id: string }) => void) => {
+    const handler = (_event: Electron.IpcRendererEvent, data: { progress: number; id: string }) => callback(data);
+    ipcRenderer.on('download-progress', handler);
+    return () => ipcRenderer.removeListener('download-progress', handler);
+  },
+  onUploadProgress: (callback: (data: { progress: number; id: string }) => void) => {
+    const handler = (_event: Electron.IpcRendererEvent, data: { progress: number; id: string }) => callback(data);
+    ipcRenderer.on('upload-progress', handler);
+    return () => ipcRenderer.removeListener('upload-progress', handler);
+  },
  clipboardReadText: () => ipcRenderer.invoke('clipboard-read-text'),
  clipboardWriteText: (text: string) => ipcRenderer.invoke('clipboard-write-text', text),
  remoteFetchDrives: (serverHost: string, port: number, password?: string) => 
    ipcRenderer.invoke('remote-fetch-drives', serverHost, port, password),
  remoteFetchFiles: (serverHost: string, port: number, filePath: string, password?: string) => 
    ipcRenderer.invoke('remote-fetch-files', serverHost, port, filePath, password),
-  remoteUploadFile: (serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => 
-    ipcRenderer.invoke('remote-upload-file', serverHost, port, filePath, remotePath, password),
-  remoteDownloadFile: (serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => 
-    ipcRenderer.invoke('remote-download-file', serverHost, port, fileName, remotePath, localPath, password),
+  remoteUploadFile: (id: string, serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => 
+    ipcRenderer.invoke('remote-upload-file', id, serverHost, port, filePath, remotePath, password),
+  remoteDownloadFile: (id: string, serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => 
+    ipcRenderer.invoke('remote-download-file', id, serverHost, port, fileName, remotePath, localPath, password),
 })
--- a/remote/src/routes/files.js
+++ b/remote/src/routes/files.js
@@ -157,13 +157,13 @@ router.post('/upload/chunk', upload.single('chunk'), (req, res) => {

 router.post('/upload/merge', (req, res) => {
  try {
-    const { fileId, totalChunks, filename } = req.body;
+    const { fileId, totalChunks, filename, path: targetPath } = req.body;
    
    if (!fileId || !totalChunks || !filename) {
      return res.status(400).json({ error: 'Missing required fields' });
    }

-    const success = fileService.mergeChunks(fileId, parseInt(totalChunks), filename);
+    const success = fileService.mergeChunks(fileId, parseInt(totalChunks), filename, targetPath);
    
    if (success) {
      res.json({ success: true, filename });
--- a/remote/src/services/file/FileService.js
+++ b/remote/src/services/file/FileService.js
@@ -91,9 +91,13 @@ class FileService {
    }
  }

-  mergeChunks(fileId, totalChunks, filename) {
+  mergeChunks(fileId, totalChunks, filename, targetPath) {
    try {
-      const filePath = path.normalize(filename);
+      let targetDir = targetPath || 'C:\\';
+      if (!fs.existsSync(targetDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+      }
+      const filePath = path.join(targetDir, filename);
      const dir = path.dirname(filePath);
      
      if (!fs.existsSync(dir)) {
--- a/src/modules/remote/api.ts
+++ b/src/modules/remote/api.ts
@@ -102,11 +102,28 @@ export const uploadFileToRemote = async (
  password?: string,
  onProgress?: (progress: number) => void
 ): Promise<void> => {
-  onProgress?.(50)
-  const result = await window.electronAPI.remoteUploadFile(serverHost, port, filePath, remotePath, password)
-  onProgress?.(100)
-  if (!result.success) {
-    throw new Error(result.error || 'Upload failed')
+  const transferId = Date.now().toString()
+
+  const cleanup = window.electronAPI?.onUploadProgress?.((data) => {
+    if (data.id === transferId) {
+      onProgress?.(data.progress)
+    }
+  })
+
+  try {
+    const result = await window.electronAPI.remoteUploadFile(
+      transferId,
+      serverHost,
+      port,
+      filePath,
+      remotePath,
+      password
+    )
+    if (!result.success) {
+      throw new Error(result.error || 'Upload failed')
+    }
+  } finally {
+    cleanup?.()
  }
 }

@@ -119,13 +136,31 @@ export const downloadFileFromRemote = async (
  password?: string,
  onProgress?: (progress: number) => void
 ): Promise<void> => {
-  onProgress?.(50)
-  const result = await window.electronAPI.remoteDownloadFile(serverHost, port, fileName, remotePath, localPath, password)
-  onProgress?.(100)
-  if (!result.success) {
-    if (result.canceled) {
-      return
+  const transferId = Date.now().toString()
+
+  const cleanup = window.electronAPI?.onDownloadProgress?.((data) => {
+    if (data.id === transferId) {
+      onProgress?.(data.progress)
    }
-    throw new Error(result.error || 'Download failed')
+  })
+
+  try {
+    const result = await window.electronAPI.remoteDownloadFile(
+      transferId,
+      serverHost,
+      port,
+      fileName,
+      remotePath,
+      localPath,
+      password
+    )
+    if (!result.success) {
+      if (result.canceled) {
+        return
+      }
+      throw new Error(result.error || 'Download failed')
+    }
+  } finally {
+    cleanup?.()
  }
 }
--- a/src/types/electron.d.ts
+++ b/src/types/electron.d.ts
@@ -14,6 +14,8 @@ export interface ElectronAPI {
  onRemoteClipboardSyncToRemote: (callback: () => void) => () => void
  onRemoteClipboardSyncFromRemote: (callback: () => void) => () => void
  onRemoteClipboardAutoSync: (callback: (text: string) => void) => () => void
+  onDownloadProgress: (callback: (data: { progress: number; id: string }) => void) => () => void
+  onUploadProgress: (callback: (data: { progress: number; id: string }) => void) => () => void
  clipboardReadText: () => Promise<{ success: boolean; text?: string; error?: string }>
  clipboardWriteText: (text: string) => Promise<{ success: boolean; error?: string }>
  remoteFetchDrives: (serverHost: string, port: number, password?: string) => Promise<{
@@ -26,11 +28,11 @@ export interface ElectronAPI {
    data?: Array<{ name: string; path: string; type: 'file' | 'dir'; size: number; modified?: string }>
    error?: string
  }>
-  remoteUploadFile: (serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => Promise<{
+  remoteUploadFile: (id: string, serverHost: string, port: number, filePath: string, remotePath: string, password?: string) => Promise<{
    success: boolean
    error?: string
  }>
-  remoteDownloadFile: (serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => Promise<{
+  remoteDownloadFile: (id: string, serverHost: string, port: number, fileName: string, remotePath: string, localPath: string, password?: string) => Promise<{
    success: boolean
    filePath?: string
    error?: string