Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/workflow/nodes/http/use-config.ts

@@ -1,12 +1,13 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
 import useVarList from '../_base/hooks/use-var-list'
 import { VarType } from '../../types'
 import type { Var } from '../../types'
 import { useStore } from '../../store'
-import type { Authorization, Body, HttpNodeType, Method, Timeout } from './types'
+import { type Authorization, type Body, BodyType, type HttpNodeType, type Method, type Timeout } from './types'
 import useKeyValueList from './hooks/use-key-value-list'
+import { transformToBodyPayload } from './utils'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 import {
@@ -25,15 +26,23 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setInputs,
   })
 
+  const [isDataReady, setIsDataReady] = useState(false)
+
   useEffect(() => {
     const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
     if (isReady) {
-      setInputs({
+      const newInputs = {
         ...defaultConfig,
         ...inputs,
-      })
+      }
+      const bodyData = newInputs.body.data
+      if (typeof bodyData === 'string')
+        newInputs.body.data = transformToBodyPayload(bodyData, [BodyType.formData, BodyType.xWwwFormUrlencoded].includes(newInputs.body.type))
+
+      setInputs(newInputs)
+      setIsDataReady(true)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultConfig])
 
   const handleMethodChange = useCallback((method: Method) => {
@@ -123,11 +132,23 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     defaultRunInputData: {},
   })
 
+  const fileVarInputs = useMemo(() => {
+    if (!Array.isArray(inputs.body.data))
+      return ''
+
+    const res = inputs.body.data
+      .filter(item => item.file?.length)
+      .map(item => item.file ? `{{#${item.file.join('.')}#}}` : '')
+      .join(' ')
+    return res
+  }, [inputs.body.data])
+
   const varInputs = getInputVars([
     inputs.url,
     inputs.headers,
     inputs.params,
-    inputs.body.data,
+    typeof inputs.body.data === 'string' ? inputs.body.data : inputs.body.data.map(item => item.value).join(''),
+    fileVarInputs,
   ])
 
   const inputVarValues = (() => {
@@ -145,6 +166,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
 
   return {
     readOnly,
+    isDataReady,
     inputs,
     handleVarListChange,
     handleAddVariable,