Feat: Allow users to parse documents directly after uploading files #3221 (#9633)

### What problem does this PR solve?

Feat: Allow users to parse documents directly after uploading files
#3221

### Type of change


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

web/src/components/file-upload-dialog/index.tsx

@@ -8,42 +8,93 @@ import {
 } from '@/components/ui/dialog';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { IModalProps } from '@/interfaces/common';
-import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 import { FileUploader } from '../file-uploader';
+import { RAGFlowFormItem } from '../ragflow-form';
+import { Form } from '../ui/form';
+import { Switch } from '../ui/switch';
 
-type UploaderTabsProps = {
-  setFiles: Dispatch<SetStateAction<File[]>>;
+function buildUploadFormSchema(t: TFunction) {
+  const FormSchema = z.object({
+    parseOnCreation: z.boolean().optional(),
+    fileList: z
+      .array(z.instanceof(File))
+      .min(1, { message: t('fileManager.pleaseUploadAtLeastOneFile') }),
+  });
+
+  return FormSchema;
+}
+
+export type UploadFormSchemaType = z.infer<
+  ReturnType<typeof buildUploadFormSchema>
+>;
+
+const UploadFormId = 'UploadFormId';
+
+type UploadFormProps = {
+  submit: (values?: UploadFormSchemaType) => void;
+  showParseOnCreation?: boolean;
 };
-
-export function UploaderTabs({ setFiles }: UploaderTabsProps) {
+function UploadForm({ submit, showParseOnCreation }: UploadFormProps) {
   const { t } = useTranslation();
+  const FormSchema = buildUploadFormSchema(t);
+
+  type UploadFormSchemaType = z.infer<typeof FormSchema>;
+  const form = useForm<UploadFormSchemaType>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      parseOnCreation: false,
+      fileList: [],
+    },
+  });
 
   return (
-    <Tabs defaultValue="account">
-      <TabsList className="grid w-full grid-cols-2 mb-4">
-        <TabsTrigger value="account">{t('fileManager.local')}</TabsTrigger>
-        <TabsTrigger value="password">{t('fileManager.s3')}</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <FileUploader onValueChange={setFiles} accept={{ '*': [] }} />
-      </TabsContent>
-      <TabsContent value="password">{t('common.comingSoon')}</TabsContent>
-    </Tabs>
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(submit)}
+        id={UploadFormId}
+        className="space-y-4"
+      >
+        {showParseOnCreation && (
+          <RAGFlowFormItem
+            name="parseOnCreation"
+            label={t('fileManager.parseOnCreation')}
+          >
+            {(field) => (
+              <Switch
+                onCheckedChange={field.onChange}
+                checked={field.value}
+              ></Switch>
+            )}
+          </RAGFlowFormItem>
+        )}
+        <RAGFlowFormItem name="fileList" label={t('fileManager.file')}>
+          {(field) => (
+            <FileUploader
+              value={field.value}
+              onValueChange={field.onChange}
+              accept={{ '*': [] }}
+            />
+          )}
+        </RAGFlowFormItem>
+      </form>
+    </Form>
   );
 }
 
+type FileUploadDialogProps = IModalProps<UploadFormSchemaType> &
+  Pick<UploadFormProps, 'showParseOnCreation'>;
 export function FileUploadDialog({
   hideModal,
   onOk,
   loading,
-}: IModalProps<File[]>) {
+  showParseOnCreation = false,
+}: FileUploadDialogProps) {
   const { t } = useTranslation();
-  const [files, setFiles] = useState<File[]>([]);
-
-  const handleOk = useCallback(() => {
-    onOk?.(files);
-  }, [files, onOk]);
 
   return (
     <Dialog open onOpenChange={hideModal}>
@@ -51,9 +102,21 @@ export function FileUploadDialog({
         <DialogHeader>
           <DialogTitle>{t('fileManager.uploadFile')}</DialogTitle>
         </DialogHeader>
-        <UploaderTabs setFiles={setFiles}></UploaderTabs>
+        <Tabs defaultValue="account">
+          <TabsList className="grid w-full grid-cols-2 mb-4">
+            <TabsTrigger value="account">{t('fileManager.local')}</TabsTrigger>
+            <TabsTrigger value="password">{t('fileManager.s3')}</TabsTrigger>
+          </TabsList>
+          <TabsContent value="account">
+            <UploadForm
+              submit={onOk!}
+              showParseOnCreation={showParseOnCreation}
+            ></UploadForm>
+          </TabsContent>
+          <TabsContent value="password">{t('common.comingSoon')}</TabsContent>
+        </Tabs>
         <DialogFooter>
-          <ButtonLoading type="submit" onClick={handleOk} loading={loading}>
+          <ButtonLoading type="submit" loading={loading} form={UploadFormId}>
             {t('common.save')}
           </ButtonLoading>
         </DialogFooter>