fix(web): FileUpload bugfix

This commit is contained in:
zhaoying
2026-02-10 17:42:40 +08:00
parent 01458ac111
commit bacffc94d9
4 changed files with 26 additions and 48 deletions

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-03 16:27:39 * @Date: 2026-02-03 16:27:39
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-10 12:18:23 * @Last Modified time: 2026-02-10 17:40:15
*/ */
/** /**
* Chat debugging component for application testing * Chat debugging component for application testing
@@ -366,10 +366,8 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
const handleMessageChange = (message: string) => { const handleMessageChange = (message: string) => {
setMessage(message) setMessage(message)
} }
const [update, setUpdate] = useState(false)
const fileChange = (file?: any) => { const fileChange = (file?: any) => {
setFileList([...fileList, file]) setFileList([...fileList, file])
setUpdate(prev => !prev)
} }
// const handleRecordingComplete = async (file: any) => { // const handleRecordingComplete = async (file: any) => {
// console.log('file', file) // console.log('file', file)
@@ -456,29 +454,27 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
onChange={handleMessageChange} onChange={handleMessageChange}
> >
<Flex justify="space-between" className="rb:flex-1"> <Flex justify="space-between" className="rb:flex-1">
<Flex gap={8} align="center"> <Flex gap={8} align="center">
<Dropdown <Dropdown
menu={{ menu={{
items: [ items: [
{ key: 'define', label: t('memoryConversation.addRemoteFile') }, { key: 'define', label: t('memoryConversation.addRemoteFile') },
{ {
key: 'upload', label: ( key: 'upload', label: (
<UploadFiles <UploadFiles
fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']} fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']}
onChange={fileChange} onChange={fileChange}
fileList={[]} />
update={update} )
/> },
) ],
}, onClick: handleShowUpload
], }}
onClick: handleShowUpload >
}} <div
> className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
<div ></div>
className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]" </Dropdown>
></div>
</Dropdown>
</Flex> </Flex>
{/* <Flex align="center"> {/* <Flex align="center">
<AudioRecorder onRecordingComplete={handleRecordingComplete} /> <AudioRecorder onRecordingComplete={handleRecordingComplete} />

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-06 21:09:42 * @Date: 2026-02-06 21:09:42
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-09 16:41:31 * @Last Modified time: 2026-02-10 17:40:08
*/ */
/** /**
* File Upload Component * File Upload Component
@@ -55,8 +55,6 @@ interface UploadFilesProps extends Omit<UploadProps, 'onChange'> {
maxCount?: number; maxCount?: number;
/** Custom file removal callback */ /** Custom file removal callback */
onRemove?: (file: UploadFile) => boolean | void | Promise<boolean | void>; onRemove?: (file: UploadFile) => boolean | void | Promise<boolean | void>;
/** Trigger to reset file list */
update?: boolean;
} }
// Mapping of file extensions to MIME types // Mapping of file extensions to MIME types
const ALL_FILE_TYPE: { const ALL_FILE_TYPE: {
@@ -109,7 +107,6 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
isAutoUpload = true, isAutoUpload = true,
maxCount = 1, maxCount = 1,
onRemove: customOnRemove, onRemove: customOnRemove,
update,
requestConfig, requestConfig,
...props ...props
}, ref) => { }, ref) => {
@@ -118,11 +115,6 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
const [fileList, setFileList] = useState<UploadFile[]>(propFileList); const [fileList, setFileList] = useState<UploadFile[]>(propFileList);
const [accept, setAccept] = useState<string | undefined>(); const [accept, setAccept] = useState<string | undefined>();
// Reset file list when update prop changes
useEffect(() => {
setFileList([])
}, [update])
/** /**
* Validates file type and size before upload * Validates file type and size before upload
* @returns Upload.LIST_IGNORE to prevent upload, or true to proceed * @returns Upload.LIST_IGNORE to prevent upload, or true to proceed
@@ -185,9 +177,7 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
/** /**
* Handles upload state changes * Handles upload state changes
*/ */
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList, event }) => { const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
console.log('event', event)
setFileList(newFileList);
if (onChange) { if (onChange) {
onChange(maxCount === 1 ? newFileList[0] : newFileList); onChange(maxCount === 1 ? newFileList[0] : newFileList);
} }

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-03 16:58:03 * @Date: 2026-02-03 16:58:03
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-09 20:20:01 * @Last Modified time: 2026-02-10 17:41:05
*/ */
/** /**
* Conversation Page * Conversation Page
@@ -254,10 +254,8 @@ const Conversation: FC = () => {
}) })
} }
const [update, setUpdate] = useState(false)
const fileChange = (file?: any) => { const fileChange = (file?: any) => {
form.setFieldValue('files', [...(queryValues.files || []), file]) form.setFieldValue('files', [...(queryValues.files || []), file])
setUpdate(prev => !prev)
} }
// const handleRecordingComplete = async (file: any) => { // const handleRecordingComplete = async (file: any) => {
// console.log('file', file) // console.log('file', file)
@@ -353,8 +351,6 @@ const Conversation: FC = () => {
action={shareFileUploadUrlWithoutApiPrefix} action={shareFileUploadUrlWithoutApiPrefix}
fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']} fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']}
onChange={fileChange} onChange={fileChange}
fileList={[]}
update={update}
requestConfig={{ requestConfig={{
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-06 21:10:56 * @Date: 2026-02-06 21:10:56
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-10 12:17:41 * @Last Modified time: 2026-02-10 17:41:24
*/ */
/** /**
* Workflow Chat Component * Workflow Chat Component
@@ -343,13 +343,11 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
const handleMessageChange = (message: string) => { const handleMessageChange = (message: string) => {
setMessage(message) setMessage(message)
} }
const [update, setUpdate] = useState(false)
/** /**
* Handles file upload from local device * Handles file upload from local device
*/ */
const fileChange = (file?: any) => { const fileChange = (file?: any) => {
setFileList([...fileList, file]) setFileList([...fileList, file])
setUpdate(prev => !prev)
} }
// const handleRecordingComplete = async (file: any) => { // const handleRecordingComplete = async (file: any) => {
// console.log('file', file) // console.log('file', file)
@@ -517,8 +515,6 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
<UploadFiles <UploadFiles
fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']} fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']}
onChange={fileChange} onChange={fileChange}
fileList={[]}
update={update}
/> />
) )
}, },