Feat: Support uploading files when running agent #3221 (#8697)

### What problem does this PR solve?

Feat: Support uploading files when running agent #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/use-agent-request.ts

@@ -26,6 +26,7 @@ export const enum AgentApiAction {
   ResetAgent = 'resetAgent',
   SetAgent = 'setAgent',
   FetchAgentTemplates = 'fetchAgentTemplates',
+  UploadCanvasFile = 'uploadCanvasFile',
 }
 
 export const EmptyDsl = {
@@ -268,3 +269,34 @@ export const useSetAgent = () => {
 
   return { data, loading, setAgent: mutateAsync };
 };
+
+export const useUploadCanvasFile = () => {
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.UploadCanvasFile],
+    mutationFn: async (body: any) => {
+      let nextBody = body;
+      try {
+        if (Array.isArray(body)) {
+          nextBody = new FormData();
+          body.forEach((file: File) => {
+            nextBody.append('file', file as any);
+          });
+        }
+
+        const { data } = await flowService.uploadCanvasFile(nextBody);
+        if (data?.code === 0) {
+          message.success(i18n.t('message.uploaded'));
+        }
+        return data;
+      } catch (error) {
+        message.error('error');
+      }
+    },
+  });
+
+  return { data, loading, uploadCanvasFile: mutateAsync };
+};