open sql file with drag & drop

packages/web/src/utility/SaveFileToolbarButton.js

@@ -8,8 +8,12 @@ export default function SaveFileToolbarButton({ tabid, save, saveAs }) {
   if (save) {
     return (
       <ToolbarDropDownButton icon="icon save" text="Save">
-        <DropDownMenuItem onClick={save}>Save</DropDownMenuItem>
-        <DropDownMenuItem onClick={saveAs}>Save As</DropDownMenuItem>
+        <DropDownMenuItem onClick={save} keyText="Ctrl+S">
+          Save
+        </DropDownMenuItem>
+        <DropDownMenuItem onClick={saveAs} keyText="Ctrl+Shift+S">
+          Save As
+        </DropDownMenuItem>
       </ToolbarDropDownButton>
     );
   }

packages/web/src/utility/UploadsProvider.js

@@ -3,8 +3,10 @@ import { useDropzone } from 'react-dropzone';
 import ImportExportModal from '../modals/ImportExportModal';
 import useShowModal from '../modals/showModal';
 import { findFileFormat } from './fileformats';
+import getElectron from './getElectron';
 import resolveApi from './resolveApi';
 import useExtensions from './useExtensions';
+import { useOpenElectronFileCore, canOpenByElectron } from './useOpenElectronFile';
 
 const UploadsContext = React.createContext(null);
 
@@ -21,6 +23,8 @@ export function useUploadFiles() {
   const { uploadListener } = useUploadsProvider();
   const showModal = useShowModal();
   const extensions = useExtensions();
+  const electron = getElectron();
+  const openElectronFileCore = useOpenElectronFileCore();
 
   const handleUploadFiles = React.useCallback(
     files => {
@@ -31,6 +35,12 @@ export function useUploadFiles() {
         }
 
         console.log('FILE', file);
+
+        if (electron && canOpenByElectron(file.path)) {
+          openElectronFileCore(file.path);
+          return;
+        }
+
         const formData = new FormData();
         formData.append('data', file);
 

packages/web/src/utility/useOpenElectronFile.js

@@ -1,31 +1,42 @@
 import useNewQuery from '../query/useNewQuery';
 import getElectron from './getElectron';
 
-export default function useOpenElectronFile() {
-  const electron = getElectron();
+export function canOpenByElectron(file) {
+  return file && file.toLowerCase().endsWith('.sql');
+}
 
+export function useOpenElectronFileCore() {
   const newQuery = useNewQuery();
 
-  return () => {
-    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
-      filters: { name: `SQL files`, extensions: ['sql'] },
-    });
-    const filePath = filePaths && filePaths[0];
-    if (filePath) {
-      if (filePath.match(/.sql$/i)) {
-        const path = window.require('path');
-        const fs = window.require('fs');
-        const parsed = path.parse(filePath);
-        const data = fs.readFileSync(filePath, { encoding: 'utf-8' });
+  return filePath => {
+    if (filePath.toLowerCase().endsWith('.sql')) {
+      const path = window.require('path');
+      const fs = window.require('fs');
+      const parsed = path.parse(filePath);
+      const data = fs.readFileSync(filePath, { encoding: 'utf-8' });
 
-        newQuery({
-          title: parsed.name,
-          initialData: data,
-          // @ts-ignore
-          savedFilePath: filePath,
-          savedFormat: 'text',
-        });
-      }
+      newQuery({
+        title: parsed.name,
+        initialData: data,
+        // @ts-ignore
+        savedFilePath: filePath,
+        savedFormat: 'text',
+      });
+    }
+  };
+}
+
+export default function useOpenElectronFile() {
+  const electron = getElectron();
+  const openElectronFileCore = useOpenElectronFileCore();
+
+  return () => {
+    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+      filters: [{ name: `SQL files`, extensions: ['sql'] }],
+    });
+    const filePath = filePaths && filePaths[0];
+    if (canOpenByElectron(filePath)) {
+      openElectronFileCore(filePath);
     }
   };
 }