diff --git a/web/src/components/ChatBox/ChatInputBox/utils.tsx b/web/src/components/ChatBox/ChatInputBox/utils.tsx
index 1583bbc2..24ce28bd 100644
--- a/web/src/components/ChatBox/ChatInputBox/utils.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/utils.tsx
@@ -13,6 +13,9 @@ export function uploadMessageImage(image: File): Promise<string> {
       const key = openModal(
         <ImageUploadPreviewer
           imageUrl={imageLocalUrl}
+          onCancel={() => {
+            closeModal(key);
+          }}
           onConfirm={async () => {
             const fileInfo = await uploadFile(image);
             const imageRemoteUrl = fileInfo.url;
diff --git a/web/src/components/modals/ImageUploadPreviewer.tsx b/web/src/components/modals/ImageUploadPreviewer.tsx
index 5e2fbd62..3c5a8be5 100644
--- a/web/src/components/modals/ImageUploadPreviewer.tsx
+++ b/web/src/components/modals/ImageUploadPreviewer.tsx
@@ -2,10 +2,13 @@ import { ModalWrapper } from '@/plugin/common';
 import { Button } from '@/plugin/component';
 import React from 'react';
 import { t, useAsyncFn } from 'tailchat-shared';
+import { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';
+import { isEnterHotkey, isEscHotkey } from '../../utils/hot-key';
 
 interface ImageUploadPreviewerProps {
   imageUrl: string;
   onConfirm: () => void;
+  onCancel: () => void;
 }
 export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
   React.memo((props) => {
@@ -17,6 +20,14 @@ export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
       }
     }, [props.onConfirm]);
 
+    useGlobalKeyDown((e) => {
+      if (isEnterHotkey(e)) {
+        handleConfirm();
+      } else if (isEscHotkey(e)) {
+        props.onCancel();
+      }
+    });
+
     return (
       <ModalWrapper style={{ maxHeight: '60vh', maxWidth: '60vw' }}>
         <div className="flex">