feat: add drag on drop

main/background.js

@@ -76,7 +76,6 @@ app.on('ready', async () => {
  if (isDev) {
  mainWindow.webContents.openDevTools();
  }
- mainWindow.removeMenu();
  mainWindow.once('ready-to-show', () => {
  setTimeout(() => {
  splashWindow.close();
@@ -121,6 +120,11 @@ app.on('ready', async () => {
  mainWindow.close();
  });
 
+ ipcMain.on('drag-files', async (e, filePaths) => {
+ files = [...filePaths];
+ const filesPathsPosix = filePaths.map((file) => file.split(path.sep).join(path.posix.sep));
+ e.reply('open-files', filesPathsPosix);
+ });
  ipcMain.on('open-files', async (e) => {
  const { filePaths } = await dialog.showOpenDialog({
  filters: [{ name: 'Изображения', extensions: ['jpg', 'png', 'gif'] }],

main/helpers/upscayl.js

@@ -15,7 +15,6 @@ const upscayl = (inputDir, outputDir = null, mainWindow, index) => {
  } else {
  outputDirectory = path.dirname(inputDir);
  }
- console.log(outputDirectory);
  if (stats.isDirectory()) {
  outFile = outputDirectory;
  } else {

src/components/Dragzone/Dragzone.module.css

@@ -0,0 +1,10 @@
+.wrapper {
+ border: 4px dashed var(--accent);
+ position: relative;
+}
+.text {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 64px 32px;
+}

src/components/Dragzone/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Dragzone.module.css';
+
+const Dragzone = (props) => {
+ const { dragOver, drop, openFile, children } = props;
+ return (
+ <div onDragOver={dragOver} onDrop={drop} onClick={openFile} className={styles.wrapper}>
+ <div className={styles.text}>{children}</div>
+ </div>
+ );
+};
+
+export default Dragzone;

src/components/Main/Main.module.css

@@ -1,6 +1,6 @@
 .main {
  height: calc(100% - 32px);
- margin-top: 32px;
+ margin-top: 24px;
  padding: 20px;
  overflow-y: auto;
 }

src/components/index.js

@@ -6,5 +6,6 @@ export { default as Main } from './Main';
 export { default as Splash } from './Splash';
 export { default as Spinner } from './Spinner';
 export { default as Image } from './Image';
+export { default as Dragzone } from './Dragzone';
 
 export { default as LangContext } from './Context';

src/locale/en.json

@@ -21,7 +21,8 @@
  "title": "Super resolution",
  "openFile": "Open file",
  "openDirectory": "Open directory",
- "upscayle": "Upscayle"
+ "upscayle": "Upscayle",
+ "dragzone": "Drag and drop a file or select image"
  },
  "settings": {
  "title": "Settings",

src/locale/ru.json

@@ -21,7 +21,8 @@
  "title": "Суперразрешение",
  "openFile": "Выбрать изображения",
  "openDirectory": "Выбрать папку",
- "upscayle": "Увеличить"
+ "upscayle": "Увеличить",
+ "dragzone": "Перетащите файл или выберите изображение"
  },
  "settings": {
  "title": "Настройки",

src/pages/superResolution.js

@@ -1,13 +1,14 @@
 import { useEffect, useState, useContext } from 'react';
 import Head from 'next/head';
 import { Button } from 'ui-forest';
-import { Header, Sidebar, Main, LangContext, Image } from '../components';
+import { Header, Sidebar, Main, LangContext, Image, Dragzone } from '../components';
 
 const superResolutionPage = () => {
  const [messages] = useContext(LangContext);
  const [images, setImages] = useState([]);
  const [percent, setPercent] = useState(0);
  const [progress, setProgress] = useState(false);
+
  const superResolution = () => {
  setProgress(true);
  window.electron.send('upscayl');
@@ -18,6 +19,22 @@ const superResolutionPage = () => {
  const openDirectory = () => {
  window.electron.send('open-directory');
  };
+ const drop = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+ const files = [];
+ for (const file of e.dataTransfer.files) {
+ if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif') {
+ files.push(file.path);
+ }
+ }
+ window.electron.send('drag-files', files);
+ }
+ };
+ const dragOver = (event) => {
+ event.preventDefault();
+ };
  useEffect(() => {
  window.electron.on('open-files', (event, files) => {
  setImages(
@@ -58,16 +75,21 @@ const superResolutionPage = () => {
  <Header title={messages.upscayl.title} />
  <Sidebar />
  <Main>
- {images
- ? images.map((image, index) => {
+ {images.length > 0 ? (
+ <>
+ {images.map((image, index) => {
  return (
  <Image key={index} after={image.after} before={image.before} progress={progress} percent={percent} />
  );
- })
- : null}
- <Button onClick={openFile}>{messages.upscayl.openFile}</Button>
+ })}
+ <Button onClick={superResolution}>{messages.upscayl.upscayle}</Button>
+ </>
+ ) : (
+ <Dragzone drop={drop} dragOver={dragOver} openFile={openFile}>
+ {messages.upscayl.dragzone}
+ </Dragzone>
+ )}
  {/* <Button onClick={openDirectory}>{messages.upscayl.openDirectory}</Button> */}
- <Button onClick={superResolution}>{messages.upscayl.upscayle}</Button>
  </Main>
  </>
  );