#885 Paste Image from Clipboard (#995)

This feature fix does the following: 1. modifies handlePaste function to save the image present in clipboard into the user selected output folder and process it. 2. names the image with hh-mm-ss timestamp and gives output file in provided folder. Here is an example with nothing in the clipboard showing an invalid image error: ![image](https://github.com/user-attachments/assets/c8596354-90d9-497f-9e08-b95ebf955b81) Here is an example with an image in the clipboard saving in user selected folder: ![image](https://github.com/user-attachments/assets/3c7e5f84-7fe1-4baa-a282-6b921641b9af)  ## Summary by CodeRabbit ## Release Notes - **New Features** - Users can now paste images directly from the clipboard using the shortcut Ctrl + V or Cmd + V. - Enhanced error messages provide clearer guidance when no image is found in the clipboard or when an output folder is not selected. - New instructions for pasting images have been added to localization files in multiple languages. - **Bug Fixes** - Improved handling of pasted images with better error notifications for invalid formats. - **Documentation** - Updated localization files for multiple languages, enhancing user instructions and error descriptions related to image handling.
2024-11-23 23:21:05 +01:00 · 2024-11-17 11:53:40 +05:30 · 2024-11-17 11:53:40 +05:30 · c5f4a7eedb
commit c5f4a7eedb
parent 83da92da4d 47797e86cf
14 changed files with 231 additions and 58 deletions
--- a/common/electron-commands.ts
+++ b/common/electron-commands.ts
@ -25,6 +25,9 @@ const ELECTRON_COMMANDS = {
  OS: "Get OS",
  SCALING_AND_CONVERTING: "Adding some finishing touches",
  UPSCAYL_ERROR: "Upscaling Error",
+  PASTE_IMAGE: "Paste Image from clipboard",
+  PASTE_IMAGE_SAVE_SUCCESS: "Clipboard Image saved successfully",
+  PASTE_IMAGE_SAVE_ERROR: "Clipboard Image save failed",
 } as const;

 export { ELECTRON_COMMANDS };
--- a/common/get-directory-from-path.ts
+++ b/common/get-directory-from-path.ts
@ -1,12 +1,15 @@
-export default function getDirectoryFromPath(filePath: string): string {
+export default function getDirectoryFromPath(
+  filePath: string,
+  popFileName: boolean = true,
+): string {
  // Define the path separator based on the operating system
  const separator = filePath.includes("/") ? "/" : "\\";

  // Split the file path by the path separator
  const pathParts = filePath.split(separator);

-  // Remove the last element to get the directory
-  pathParts.pop();
+  // Remove the last element to get the directory if popFileName is true
+  if (popFileName) pathParts.pop();

  // Join the remaining parts back together to form the directory path
  const directoryPath = pathParts.join(separator);
--- a/common/image-formats.ts
+++ b/common/image-formats.ts
@ -0,0 +1 @@
+export const imageFormats = ["png", "jpg", "jpeg", "webp"] as const;
--- a/electron/commands/paste-image.ts
+++ b/electron/commands/paste-image.ts
@ -0,0 +1,61 @@
+import { getMainWindow } from "../main-window";
+import logit from "../utils/logit";
+import fs from "fs";
+import path from "path";
+import { ELECTRON_COMMANDS } from "../../common/electron-commands";
+import { ImageFormat } from "../types/types";
+import { imageFormats } from "../../common/image-formats";
+
+interface IClipboardFileParameters {
+  name: string;
+  path: string;
+  extension: ImageFormat;
+  size: number;
+  type: string;
+  encodedBuffer: string;
+}
+
+const isImageFormatValid = (format: string): format is ImageFormat => {
+  return (imageFormats as readonly string[]).includes(format);
+};
+
+const createTempFileFromClipboard = async (
+  inputFileParams: IClipboardFileParameters,
+): Promise<string> => {
+  const tempFilePath = path.join(inputFileParams.path, inputFileParams.name);
+  const buffer = Buffer.from(inputFileParams.encodedBuffer, "base64");
+
+  await fs.promises.writeFile(tempFilePath, buffer);
+  return tempFilePath;
+};
+
+const pasteImage = async (
+  event: Electron.IpcMainEvent,
+  file: IClipboardFileParameters,
+) => {
+  const mainWindow = getMainWindow();
+  if (!mainWindow) return;
+  if (!file || !file.name || !file.encodedBuffer) return;
+  if (isImageFormatValid(file.extension)) {
+    try {
+      const imageFilePath = await createTempFileFromClipboard(file);
+      mainWindow.webContents.send(
+        ELECTRON_COMMANDS.PASTE_IMAGE_SAVE_SUCCESS,
+        imageFilePath,
+      );
+    } catch (error: any) {
+      logit(error.message);
+      mainWindow.webContents.send(
+        ELECTRON_COMMANDS.PASTE_IMAGE_SAVE_ERROR,
+        error.message,
+      );
+    }
+  } else {
+    mainWindow.webContents.send(
+      ELECTRON_COMMANDS.PASTE_IMAGE_SAVE_ERROR,
+      "Unsupported Image Format",
+    );
+  }
+};
+
+export default pasteImage;
--- a/electron/index.ts
+++ b/electron/index.ts
@ -19,6 +19,7 @@ import doubleUpscayl from "./commands/double-upscayl";
 import autoUpdate from "./commands/auto-update";
 import { FEATURE_FLAGS } from "../common/feature-flags";
 import settings from "electron-settings";
+import pasteImage from "./commands/paste-image";

 // INITIALIZATION
 log.initialize({ preload: true });
@ -94,6 +95,8 @@ ipcMain.on(ELECTRON_COMMANDS.FOLDER_UPSCAYL, batchUpscayl);

 ipcMain.on(ELECTRON_COMMANDS.DOUBLE_UPSCAYL, doubleUpscayl);

+ipcMain.on(ELECTRON_COMMANDS.PASTE_IMAGE, pasteImage);
+
 if (!FEATURE_FLAGS.APP_STORE_BUILD) {
  autoUpdater.on("update-downloaded", autoUpdate);
 }
--- a/electron/types/types.d.ts
+++ b/electron/types/types.d.ts
@ -1 +1,3 @@
-export type ImageFormat = "png" | "jpg" | "webp";
+import { imageFormats } from "../../common/image-formats";
+
+export type ImageFormat = (typeof imageFormats)[number];
--- a/renderer/components/main-content/index.tsx
+++ b/renderer/components/main-content/index.tsx
@ -1,8 +1,8 @@
 "use client";
 import useLogger from "../hooks/use-logger";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { ELECTRON_COMMANDS } from "@common/electron-commands";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import {
  batchModeAtom,
  lensSizeAtom,
@ -63,7 +63,7 @@ const MainContent = ({
  const { toast } = useToast();
  const version = useUpscaylVersion();

-  const setOutputPath = useSetAtom(savedOutputPathAtom);
+  const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
  const progress = useAtomValue(progressAtom);
  const batchMode = useAtomValue(batchModeAtom);

@ -163,45 +163,108 @@ const MainContent = ({
  };

  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
-    console.log("📋 Pasted: ", e);
-    resetImagePaths();
    e.preventDefault();
-    const items = e.clipboardData.items;
-    const files = e.clipboardData.files;
-    console.log("🚀 => files:", files);
+    if (outputPath) {
+      resetImagePaths();
+      if (e.clipboardData.files.length) {
+        const fileObject = e.clipboardData.files[0];
+        const currentDate = new Date(Date.now());
+        const currentTime = `${currentDate.getHours()}-${currentDate.getMinutes()}-${currentDate.getSeconds()}`;
+        const fileName = `.temp-${currentTime}-${fileObject.name || "image"}`;
+        const file = {
+          name: fileName,
+          path: outputPath,
+          extension: fileName.split(".").pop() as ImageFormat,
+          size: fileObject.size,
+          type: fileObject.type.split("/")[0],
+          encodedBuffer: "",
+        };

-    if (items.length === 0 || files.length === 0) {
-      toast({
-        title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"),
-        description: t("ERRORS.INVALID_IMAGE_ERROR.ADDITIONAL_DESCRIPTION"),
-      });
-      return;
-    }
-    const type = items[0].type;
-    const filePath = files[0].path;
-    const extension = files[0].name
-      .split(".")
-      .at(-1)
-      .toLowerCase() as ImageFormat;
-    logit("📋 Pasted file: ", JSON.stringify({ type, filePath, extension }));
-    if (!type.includes("image") && !VALID_IMAGE_FORMATS.includes(extension)) {
-      toast({
-        title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"),
-        description: t("ERRORS.INVALID_IMAGE_ERROR.ADDITIONAL_DESCRIPTION"),
-      });
-    } else {
-      setImagePath(filePath);
-      const dirname = getDirectoryFromPath(filePath);
-      logit("🗂 Setting output path: ", dirname);
-      if (!FEATURE_FLAGS.APP_STORE_BUILD) {
-        if (!rememberOutputFolder) {
-          setOutputPath(dirname);
+        logit(
+          "📋 Pasted file: ",
+          JSON.stringify({
+            name: file.name,
+            path: file.path,
+            extension: file.extension,
+          }),
+        );
+
+        if (
+          file.type === "image" &&
+          VALID_IMAGE_FORMATS.includes(file.extension)
+        ) {
+          const reader = new FileReader();
+          reader.onload = async (event) => {
+            const result = event.target?.result;
+            if (typeof result === "string") {
+              file.encodedBuffer = Buffer.from(result, "utf-8").toString(
+                "base64",
+              );
+            } else if (result instanceof ArrayBuffer) {
+              file.encodedBuffer = Buffer.from(new Uint8Array(result)).toString(
+                "base64",
+              );
+            } else {
+              logit("🚫 Invalid file pasted");
+              toast({
+                title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"),
+                description: t(
+                  "ERRORS.INVALID_IMAGE_ERROR.CLIPBOARD_DESCRIPTION",
+                ),
+              });
+            }
+            window.electron.send(ELECTRON_COMMANDS.PASTE_IMAGE, file);
+          };
+          reader.readAsArrayBuffer(fileObject);
+        } else {
+          logit("🚫 Invalid file pasted");
+          toast({
+            title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"),
+            description: t("ERRORS.INVALID_IMAGE_ERROR.CLIPBOARD_DESCRIPTION"),
+          });
        }
+      } else {
+        logit("🚫 Invalid file pasted");
+        toast({
+          title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"),
+          description: t("ERRORS.INVALID_IMAGE_ERROR.CLIPBOARD_DESCRIPTION"),
+        });
      }
-      validateImagePath(filePath);
+    } else {
+      toast({
+        title: t("ERRORS.NO_OUTPUT_FOLDER_ERROR.TITLE"),
+        description: t("ERRORS.NO_OUTPUT_FOLDER_ERROR.DESCRIPTION"),
+      });
    }
  };

+  useEffect(() => {
+    // Events
+    const handlePasteEvent = (e) => handlePaste(e);
+    const handlePasteImageSaveSuccess = (_: any, imageFilePath: string) => {
+      setImagePath(imageFilePath);
+      validateImagePath(imageFilePath);
+    };
+    const handlePasteImageSaveError = (_: any, error: string) => {
+      toast({
+        title: t("ERRORS.NO_IMAGE_ERROR.TITLE"),
+        description: error,
+      });
+    };
+    window.addEventListener("paste", handlePasteEvent);
+    window.electron.on(
+      ELECTRON_COMMANDS.PASTE_IMAGE_SAVE_SUCCESS,
+      handlePasteImageSaveSuccess,
+    );
+    window.electron.on(
+      ELECTRON_COMMANDS.PASTE_IMAGE_SAVE_ERROR,
+      handlePasteImageSaveError,
+    );
+    return () => {
+      window.removeEventListener("paste", handlePasteEvent);
+    };
+  }, [t, outputPath]);
+
  return (
    <div
      className="relative flex h-screen w-full flex-col items-center justify-center"
@ -210,7 +273,6 @@ const MainContent = ({
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDoubleClick={batchMode ? selectFolderHandler : selectImageHandler}
-      onPaste={handlePaste}
    >
      <MacTitlebarDragRegion />

--- a/renderer/components/main-content/instructions-card.tsx
+++ b/renderer/components/main-content/instructions-card.tsx
@ -19,6 +19,8 @@ function InstructionsCard({ version, batchMode }) {
      ) : (
        <p className="w-full pb-5 text-center text-base-content/80 md:w-96">
          {t("APP.RIGHT_PANE_INFO.SELECT_IMAGES_DESCRIPTION")}
+          <br />
+          {t("APP.RIGHT_PANE_INFO.PASTE_IMAGE_DESCRIPTION")}
        </p>
      )}
      <p className="badge badge-primary text-sm">Upscayl v{version}</p>
--- a/renderer/locales/en.json
+++ b/renderer/locales/en.json
@ -147,7 +147,8 @@
      "SELECT_FOLDER": "Select a Folder to Upscayl",
      "SELECT_IMAGE": "Select an Image to Upscayl",
      "SELECT_FOLDER_DESCRIPTION": "Make sure that the folder doesn't contain anything except PNG, JPG, JPEG & WEBP images.",
-      "SELECT_IMAGES_DESCRIPTION": "Select or drag and drop a PNG, JPG, JPEG or WEBP image."
+      "SELECT_IMAGES_DESCRIPTION": "Select or drag and drop a PNG, JPG, JPEG or WEBP image.",
+      "PASTE_IMAGE_DESCRIPTION": "Hit Ctrl + V or Cmd + V to Paste image from Clipboard"
    },
    "PROGRESS": {
      "PROCESSING_TITLE": "Processing the image...",
@ -192,10 +193,15 @@
    "GENERIC_ERROR": {
      "TITLE": "Error"
    },
+    "NO_OUTPUT_FOLDER_ERROR": {
+      "TITLE": "Set Output Folder",
+      "DESCRIPTION": "Please select an output folder first"
+    },
    "INVALID_IMAGE_ERROR": {
      "TITLE": "Invalid Image",
-      "DESCRIPTION": "Please select an image with a valid extension like PNG, JPG, JPEG, JFIF or WEBP.",
-      "ADDITIONAL_DESCRIPTION": "Please drag and drop an image"
+      "DESCRIPTION": "Please select/paste an image with a valid extension like PNG, JPG, JPEG, JFIF or WEBP.",
+      "ADDITIONAL_DESCRIPTION": "Please drag and drop an image",
+      "CLIPBOARD_DESCRIPTION": "No Image file found in Clipboard to paste!"
    },
    "NO_IMAGE_ERROR": {
      "TITLE": "No image selected",
--- a/renderer/locales/es.json
+++ b/renderer/locales/es.json
@ -147,7 +147,8 @@
      "SELECT_FOLDER": "Selecciona una carpeta para aumentar",
      "SELECT_IMAGE": "Selecciona una imagen para aumentar",
      "SELECT_FOLDER_DESCRIPTION": "Asegúrate de que la carpeta no contenga nada excepto imágenes PNG, JPG, JPEG y WEBP.",
-      "SELECT_IMAGES_DESCRIPTION": "Selecciona o arrastra y suelta una imagen PNG, JPG, JPEG o WEBP."
+      "SELECT_IMAGES_DESCRIPTION": "Selecciona o arrastra y suelta una imagen PNG, JPG, JPEG o WEBP.",
+      "PASTE_IMAGE_DESCRIPTION": "Presiona Ctrl + V o Cmd + V para pegar la imagen desde el portapapeles"
    },
    "PROGRESS": {
      "PROCESSING_TITLE": "Procesando la imagen...",
@ -192,10 +193,15 @@
    "GENERIC_ERROR": {
      "TITLE": "Error"
    },
+    "NO_OUTPUT_FOLDER_ERROR": {
+      "TITLE": "Establecer carpeta de salida",
+      "DESCRIPTION": "Por favor, selecciona primero una carpeta de salida"
+    },
    "INVALID_IMAGE_ERROR": {
      "TITLE": "Imagen inválida",
-      "DESCRIPTION": "Por favor, selecciona una imagen con una extensión válida como PNG, JPG, JPEG, JFIF o WEBP.",
-      "ADDITIONAL_DESCRIPTION": "Por favor, arrastra y suelta una imagen"
+      "DESCRIPTION": "Por favor, selecciona/pega una imagen con una extensión válida como PNG, JPG, JPEG, JFIF o WEBP.",
+      "ADDITIONAL_DESCRIPTION": "Por favor, arrastra y suelta una imagen",
+      "CLIPBOARD_DESCRIPTION": "¡No se encontró ningún archivo de imagen en el portapapeles para pegar!"
    },
    "NO_IMAGE_ERROR": {
      "TITLE": "No se ha seleccionado imagen",
--- a/renderer/locales/fr.json
+++ b/renderer/locales/fr.json
@ -147,7 +147,8 @@
      "SELECT_FOLDER": "Sélectionnez un dossier à suréchantillonner",
      "SELECT_IMAGE": "Sélectionnez une image à suréchantillonner",
      "SELECT_FOLDER_DESCRIPTION": "Assurez-vous que le dossier ne contient rien d'autre que des images PNG, JPG, JPEG et WEBP.",
-      "SELECT_IMAGES_DESCRIPTION": "Sélectionnez ou glissez-déposez une image PNG, JPG, JPEG ou WEBP."
+      "SELECT_IMAGES_DESCRIPTION": "Sélectionnez ou glissez-déposez une image PNG, JPG, JPEG ou WEBP.",
+      "PASTE_IMAGE_DESCRIPTION": "Appuyez sur Ctrl + V ou Cmd + V pour coller l'image depuis le presse-papiers"
    },
    "PROGRESS": {
      "PROCESSING_TITLE": "Traitement de l'image...",
@ -192,10 +193,15 @@
    "GENERIC_ERROR": {
      "TITLE": "Erreur"
    },
+    "NO_OUTPUT_FOLDER_ERROR": {
+      "TITLE": "Définir le dossier de sortie",
+      "DESCRIPTION": "Veuillez d'abord sélectionner un dossier de sortie"
+    },
    "INVALID_IMAGE_ERROR": {
      "TITLE": "Image invalide",
-      "DESCRIPTION": "Veuillez sélectionner une image avec une extension valide comme PNG, JPG, JPEG, JFIF ou WEBP.",
-      "ADDITIONAL_DESCRIPTION": "Veuillez glisser-déposer une image"
+      "DESCRIPTION": "Veuillez sélectionner/coller une image avec une extension valide comme PNG, JPG, JPEG, JFIF ou WEBP.",
+      "ADDITIONAL_DESCRIPTION": "Veuillez faire glisser et déposer une image",
+      "CLIPBOARD_DESCRIPTION": "Aucun fichier image trouvé dans le presse-papiers à coller !"
    },
    "NO_IMAGE_ERROR": {
      "TITLE": "Aucune image sélectionnée",
--- a/renderer/locales/ja.json
+++ b/renderer/locales/ja.json
@ -147,7 +147,8 @@
      "SELECT_FOLDER": "Upscaylするフォルダを選択",
      "SELECT_IMAGE": "Upscaylする画像を選択",
      "SELECT_FOLDER_DESCRIPTION": "フォルダにはPNG、JPG、JPEG、WEBPの画像以外のものが含まれていないことを確認してください。",
-      "SELECT_IMAGES_DESCRIPTION": "PNG、JPG、JPEG、またはWEBP画像を選択するか、ドラッグアンドドロップしてください。"
+      "SELECT_IMAGES_DESCRIPTION": "PNG、JPG、JPEG、またはWEBP画像を選択するか、ドラッグアンドドロップしてください。",
+      "PASTE_IMAGE_DESCRIPTION": "Ctrl + V または Cmd + V を押してクリップボードから画像を貼り付けます"
    },
    "PROGRESS": {
      "PROCESSING_TITLE": "画像を処理中...",
@ -192,10 +193,15 @@
    "GENERIC_ERROR": {
      "TITLE": "エラー"
    },
+    "NO_OUTPUT_FOLDER_ERROR": {
+      "TITLE": "出力フォルダを設定",
+      "DESCRIPTION": "まず出力フォルダを選択してください"
+    },
    "INVALID_IMAGE_ERROR": {
      "TITLE": "無効な画像",
-      "DESCRIPTION": "PNG、JPG、JPEG、JFIF、またはWEBPなどの有効な拡張子を持つ画像を選択してください。",
-      "ADDITIONAL_DESCRIPTION": "画像をドラッグアンドドロップしてください"
+      "DESCRIPTION": "PNG、JPG、JPEG、JFIF、または WEBP のような有効な拡張子の画像を選択/貼り付けてください。",
+      "ADDITIONAL_DESCRIPTION": "画像をドラッグアンドドロップしてください",
+      "CLIPBOARD_DESCRIPTION": "クリップボードに貼り付ける画像ファイルが見つかりません！"
    },
    "NO_IMAGE_ERROR": {
      "TITLE": "画像が選択されていません",
--- a/renderer/locales/ru.json
+++ b/renderer/locales/ru.json
@ -147,7 +147,8 @@
      "SELECT_FOLDER": "Выберите папку для увеличения",
      "SELECT_IMAGE": "Выберите изображение для увеличения",
      "SELECT_FOLDER_DESCRIPTION": "Убедитесь, что в папке нет ничего, кроме изображений PNG, JPG, JPEG и WEBP.",
-      "SELECT_IMAGES_DESCRIPTION": "Выберите или перетащите изображение в формате PNG, JPG, JPEG или WEBP."
+      "SELECT_IMAGES_DESCRIPTION": "Выберите или перетащите изображение в формате PNG, JPG, JPEG или WEBP.",
+      "PASTE_IMAGE_DESCRIPTION": "Нажмите Ctrl + V или Cmd + V, чтобы вставить изображение из буфера обмена"
    },
    "PROGRESS": {
      "PROCESSING_TITLE": "Обработка изображения...",
@ -192,10 +193,15 @@
    "GENERIC_ERROR": {
      "TITLE": "Ошибка"
    },
+    "NO_OUTPUT_FOLDER_ERROR": {
+      "TITLE": "Установить папку вывода",
+      "DESCRIPTION": "Пожалуйста, сначала выберите папку вывода"
+    },
    "INVALID_IMAGE_ERROR": {
      "TITLE": "Неверное изображение",
-      "DESCRIPTION": "Пожалуйста, выберите изображение с правильным расширением, таким как PNG, JPG, JPEG, JFIF или WEBP.",
-      "ADDITIONAL_DESCRIPTION": "Пожалуйста, перетащите изображение"
+      "DESCRIPTION": "Пожалуйста, выберите/вставьте изображение с допустимым расширением, таким как PNG, JPG, JPEG, JFIF или WEBP.",
+      "ADDITIONAL_DESCRIPTION": "Пожалуйста, перетащите и отпустите изображение",
+      "CLIPBOARD_DESCRIPTION": "Файл изображения не найден в буфере обмена для вставки!"
    },
    "NO_IMAGE_ERROR": {
      "TITLE": "Изображение не выбрано",
--- a/renderer/locales/zh.json
+++ b/renderer/locales/zh.json
@ -147,7 +147,8 @@
      "SELECT_FOLDER": "选择要增强的文件夹",
      "SELECT_IMAGE": "选择要增强的图片",
      "SELECT_FOLDER_DESCRIPTION": "文件夹中只支持 PNG、JPG、JPEG 和 WEBP 图片。",
-      "SELECT_IMAGES_DESCRIPTION": "选择或拖放 PNG、JPG、JPEG 或 WEBP 图片。"
+      "SELECT_IMAGES_DESCRIPTION": "选择或拖放 PNG、JPG、JPEG 或 WEBP 图片。",
+      "PASTE_IMAGE_DESCRIPTION": "按 Ctrl + V 或 Cmd + V 来粘贴图像"
    },
    "PROGRESS": {
      "PROCESSING_TITLE": "正在处理图片...",
@ -192,10 +193,15 @@
    "GENERIC_ERROR": {
      "TITLE": "错误"
    },
+    "NO_OUTPUT_FOLDER_ERROR": {
+      "TITLE": "选择输出文件夹",
+      "DESCRIPTION": "请先选择一个输出文件夹"
+    },
    "INVALID_IMAGE_ERROR": {
      "TITLE": "图片无效",
-      "DESCRIPTION": "请选择一个扩展名为 PNG、JPG、JPEG、JFIF 或 WEBP 的有效图片",
-      "ADDITIONAL_DESCRIPTION": "请拖放图片"
+      "DESCRIPTION": "请选择/粘貼一个扩展名为 PNG、JPG、JPEG、JFIF 或 WEBP 的有效图片",
+      "ADDITIONAL_DESCRIPTION": "请拖放一张图片",
+      "CLIPBOARD_DESCRIPTION": "剪贴板中未找到可粘贴的图像文件！"
    },
    "NO_IMAGE_ERROR": {
      "TITLE": "未选择图片",
				`@ -0,0 +1 @@`
				`export const imageFormats = ["png", "jpg", "jpeg", "webp"] as const;`