fix(App): Fix "save image as"

Author: adlk

src/electron/ipc-api/download.js

@@ -3,7 +3,6 @@ import autoUpdate from './autoUpdate';
 import browserViewManager from './browserViewManager';
 import cld from './cld';
 import desktopCapturer from './desktopCapturer';
-import download from './download';
 import focusState from './focusState';
 import fullscreenStatus from './fullscreen';
 import macOSPermissions from './macOSPermissions';
@@ -16,7 +15,6 @@ export default (params) => {
   settings(params);
   autoUpdate(params);
   appIndicator(params);
-  download(params);
   cld(params);
   desktopCapturer();
   focusState(params);

src/electron/ipc-api/index.js

@@ -11,6 +11,7 @@ import { DEFAULT_WEB_CONTENTS_ID } from '../config';
 import { isDevMode, isMac } from '../environment';
 import { IPC } from '../features/todos/constants';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
+import { downloadFile } from '../lib/download';
 
 const debug = require('debug')('Franz:feature:serviceContextMenu');
 
@@ -211,6 +212,14 @@ export const buildMenuTpl = ({
           reader.onloadend = () => {
             const base64data = reader.result;
 
+            downloadFile({
+              content: base64data,
+              webContents: contents,
+              fileOptions: {
+                name: fileName,
+                mime: blob.type,
+              },
+            });
             contents.send('download-file', {
               content: base64data,
               fileOptions: {
@@ -222,6 +231,10 @@ export const buildMenuTpl = ({
           debug('binary string', blob);
         } else {
           contents.send('download-file', { url: props.srcURL });
+          downloadFile({
+            url: props.srcURL,
+            webContents: contents,
+          });
         }
       },
     }, {

src/electron/serviceContextMenuTemplate.ts

@@ -0,0 +1,68 @@
+import { dialog, WebContents } from 'electron';
+import { download } from 'electron-dl';
+import fs from 'fs-extra';
+import mime from 'mime-types';
+
+const debug = require('debug')('Franz:ipcApi:download');
+
+function decodeBase64Image(dataString) {
+  const matches = dataString.match(/^data:([A-Za-z-+/]+);base64,(.+)$/);
+
+  if (matches.length !== 3) {
+    return new Error('Invalid input string');
+  }
+
+  return Buffer.from(matches[2], 'base64');
+}
+
+type Params = {
+  url?: string;
+  content?: string | ArrayBuffer;
+  webContents: WebContents;
+  fileOptions?: {
+    mime: string;
+    name: string;
+  };
+}
+// export default (params) => {
+export async function downloadFile({
+  url,
+  content,
+  webContents,
+  fileOptions,
+}: Params) {
+  // We're passing a fake browserWindow to `electron-dl` in order to access the
+  // webContents of the webview that has initiated the download
+  const fakeWindow = {
+    webContents,
+  };
+
+  try {
+    if (!content) {
+      const dl = await download(fakeWindow, url, {
+        saveAs: true,
+      });
+      debug('File saved to', dl.savePath);
+    } else {
+      const extension = mime.extension(fileOptions.mime);
+      const filename = `${fileOptions.name}.${extension}`;
+
+      try {
+        const saveDialog = await dialog.showSaveDialog(null, {
+          defaultPath: filename,
+        });
+
+        if (saveDialog.canceled) return;
+
+        const binaryImage = decodeBase64Image(content);
+        fs.writeFileSync(saveDialog.filePath, binaryImage, 'binary');
+
+        debug('File blob saved to', saveDialog.filePath);
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+}