From 86f10d49864152376cd0d932c411cd26411a8eb9 Mon Sep 17 00:00:00 2001 From: DDMeaqua Date: Sat, 7 Sep 2024 15:47:22 +0800 Subject: [PATCH 1/2] feat: add drop upload --- app/components/chat.tsx | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index dad1933ace9..8edb28e6c23 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1373,6 +1373,43 @@ function _Chat() { setAttachImages(images); } + const handleDrop = async (event: React.DragEvent) => { + event.preventDefault(); // 阻止默认行为 + const acceptedTypes = [ + "image/png", + "image/jpeg", + "image/webp", + "image/heic", + "image/heif", + ]; + + const files = event.dataTransfer.files; // 获取拖拽的文件 + if (files.length > 0) { + const imagesData: string[] = []; + setUploading(true); + + for (let i = 0; i < files.length; i++) { + const file = files[i]; + + // 检查文件类型是否是图片 + if (!acceptedTypes.includes(file.type)) { + console.warn("文件类型不被接受:", file.type); + continue; // 如果不是图片类型，跳过这个文件 + } + + try { + const dataUrl = await uploadImageRemote(file); // 上传文件 + imagesData.push(dataUrl); + } catch (error) { + console.error("上传文件失败", error); + } + } + + setAttachImages(imagesData); + setUploading(false); + } + }; + return (
@@ -1715,6 +1752,8 @@ function _Chat() { fontSize: config.fontSize, fontFamily: config.fontFamily, }} + onDrop={handleDrop} + onDragOver={(e) => e.preventDefault()} /> {attachImages.length != 0 && (
From aaee1ac0814b28eae4cc887827bef3f5d84fff73 Mon Sep 17 00:00:00 2001 From: DDMeaqua Date: Sat, 14 Sep 2024 14:49:04 +0800 Subject: [PATCH 2/2] chore: test css --- app/components/chat.module.scss | 27 ++++++++++++++ app/components/chat.tsx | 65 ++++++++++++++++++++++----------- app/icons/file-upload.svg | 15 ++++++++ app/locales/cn.ts | 2 + app/locales/en.ts | 2 + app/locales/tw.ts | 2 + 6 files changed, 91 insertions(+), 22 deletions(-) create mode 100644 app/icons/file-upload.svg diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index 7176399cc36..cffaab6e271 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -646,3 +646,30 @@ bottom: 30px; } } + +.drag-overlay { + display: none; +} + +.drag-overlay-show { + pointer-events: none; + display: flex; + flex-direction: column; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.01); + justify-content: center; + align-items: center; + color: var(--black); + font-size: 14px; + z-index: 9999; + backdrop-filter: blur(10px); + + p { + font-size: 16px; + font-weight: 700; + } +} \ No newline at end of file diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 8edb28e6c23..da6f1fa159f 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -42,6 +42,7 @@ import SizeIcon from "../icons/size.svg"; import QualityIcon from "../icons/hd.svg"; import StyleIcon from "../icons/palette.svg"; import PluginIcon from "../icons/plugin.svg"; +import FileUploadIcon from "../icons/file-upload.svg"; import { ChatMessage, @@ -1373,30 +1374,34 @@ function _Chat() { setAttachImages(images); } - const handleDrop = async (event: React.DragEvent) => { - event.preventDefault(); // 阻止默认行为 - const acceptedTypes = [ - "image/png", - "image/jpeg", - "image/webp", - "image/heic", - "image/heif", - ]; - - const files = event.dataTransfer.files; // 获取拖拽的文件 - if (files.length > 0) { + const [showDragOverlay, setShowDragOverlay] = useState(false); + + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault(); + setShowDragOverlay(true); + }; + + const handleDragEnter = (e: React.DragEvent) => { + setShowDragOverlay(true); + }; + + const handleDragLeave = (e: React.DragEvent) => { + if (!e.currentTarget.contains(e.relatedTarget as Node)) { + setShowDragOverlay(false); + } + }; + + const handleDrop = async (e: React.DragEvent) => { + e.preventDefault(); + setShowDragOverlay(false); + + const files = e.dataTransfer?.files; + if (files && files.length > 0) { const imagesData: string[] = []; setUploading(true); for (let i = 0; i < files.length; i++) { const file = files[i]; - - // 检查文件类型是否是图片 - if (!acceptedTypes.includes(file.type)) { - console.warn("文件类型不被接受:", file.type); - continue; // 如果不是图片类型，跳过这个文件 - } - try { const dataUrl = await uploadImageRemote(file); // 上传文件 imagesData.push(dataUrl); @@ -1411,7 +1416,25 @@ function _Chat() { }; return ( -
+
+
+ + + +

{Locale.Chat.Actions.Addanything}

+ {Locale.Chat.Actions.AddanythingSub} +
{isMobileScreen && (
@@ -1752,8 +1775,6 @@ function _Chat() { fontSize: config.fontSize, fontFamily: config.fontFamily, }} - onDrop={handleDrop} - onDragOver={(e) => e.preventDefault()} /> {attachImages.length != 0 && (
diff --git a/app/icons/file-upload.svg b/app/icons/file-upload.svg new file mode 100644 index 00000000000..0ee406796ab --- /dev/null +++ b/app/icons/file-upload.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 33e368f69f4..314d082cfe6 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -43,6 +43,8 @@ const cn = { Delete: "删除", Edit: "编辑", FullScreen: "全屏", + Addanything: "添加任意内容", + AddanythingSub: "将任意文件拖拽到此处添加到对话中", }, Commands: { new: "新建聊天", diff --git a/app/locales/en.ts b/app/locales/en.ts index 403b9b687e7..60cebb9b7ce 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -45,6 +45,8 @@ const en: LocaleType = { Delete: "Delete", Edit: "Edit", FullScreen: "FullScreen", + Addanything: "Add anything", + AddanythingSub: "Drop any file here to add it to the conversation", }, Commands: { new: "Start a new chat", diff --git a/app/locales/tw.ts b/app/locales/tw.ts index 6b2c0fd65b1..5cb49dda7ff 100644 --- a/app/locales/tw.ts +++ b/app/locales/tw.ts @@ -43,6 +43,8 @@ const tw = { PinToastAction: "檢視", Delete: "刪除", Edit: "編輯", + Addanything: "添加任意內容", + AddanythingSub: "將任意文件拖曳到此處添加到對話中", }, Commands: { new: "新建聊天",