From ec762de5b1dca780202d176b15e91a52db34c8d4 Mon Sep 17 00:00:00 2001
From: Henry Heng <henryheng@flowiseai.com>
Date: Wed, 28 Aug 2024 19:06:04 +0100
Subject: [PATCH] Bugfix/prevent upsert when images are uploaded (#3102)

prevent upsert when images are uploaded
---
 .../ui/src/views/chatmessage/ChatMessage.jsx  | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/views/chatmessage/ChatMessage.jsx b/packages/ui/src/views/chatmessage/ChatMessage.jsx
index 41a5fe15579..df6d4b9dca8 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.jsx
+++ b/packages/ui/src/views/chatmessage/ChatMessage.jsx
@@ -264,7 +264,10 @@ export const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, preview
                 }
                 const reader = new FileReader()
                 const { name } = file
-                uploadedFiles.push(file)
+                // Only add files
+                if (!imageUploadAllowedTypes.includes(file.type)) {
+                    uploadedFiles.push(file)
+                }
                 files.push(
                     new Promise((resolve) => {
                         reader.onload = (evt) => {
@@ -340,7 +343,10 @@ export const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, preview
             if (isFileAllowedForUpload(file) === false) {
                 return
             }
-            uploadedFiles.push(file)
+            // Only add files
+            if (!imageUploadAllowedTypes.includes(file.type)) {
+                uploadedFiles.push(file)
+            }
             const reader = new FileReader()
             const { name } = file
             files.push(
@@ -1197,14 +1203,11 @@ export const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, preview
                     onDrop={handleDrop}
                 />
             )}
-            {isDragActive &&
-                (getAllowChatFlowUploads.data?.isImageUploadAllowed || getAllowChatFlowUploads.data?.isFileAllowedForUpload) && (
-                    <Box className='drop-overlay'>
-                        <Typography variant='h2'>Drop here to upload</Typography>
-                        {[
-                            ...getAllowChatFlowUploads.data.imgUploadSizeAndTypes,
-                            ...getAllowChatFlowUploads.data.fileUploadSizeAndTypes
-                        ].map((allowed) => {
+            {isDragActive && (getAllowChatFlowUploads.data?.isImageUploadAllowed || getAllowChatFlowUploads.data?.isFileUploadAllowed) && (
+                <Box className='drop-overlay'>
+                    <Typography variant='h2'>Drop here to upload</Typography>
+                    {[...getAllowChatFlowUploads.data.imgUploadSizeAndTypes, ...getAllowChatFlowUploads.data.fileUploadSizeAndTypes].map(
+                        (allowed) => {
                             return (
                                 <>
                                     <Typography variant='subtitle1'>{allowed.fileTypes?.join(', ')}</Typography>
@@ -1213,9 +1216,10 @@ export const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, preview
                                     )}
                                 </>
                             )
-                        })}
-                    </Box>
-                )}
+                        }
+                    )}
+                </Box>
+            )}
             <div ref={ps} className={`${isDialog ? 'cloud-dialog' : 'cloud'}`}>
                 <div id='messagelist' className={'messagelist'}>
                     {messages &&