diff --git a/web/components/knowledge/doc-upload-form.tsx b/web/components/knowledge/doc-upload-form.tsx
index 188190dc3..81ec91978 100644
--- a/web/components/knowledge/doc-upload-form.tsx
+++ b/web/components/knowledge/doc-upload-form.tsx
@@ -6,6 +6,7 @@ import { apiInterceptors, addDocument, uploadDocument } from '@/client/api';
 import { RcFile, UploadChangeParam } from 'antd/es/upload';
 import { File, StepChangeParams } from '@/types/knowledge';
 import { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
+import classNames from 'classnames';
 
 type FileParams = {
   file: RcFile;
@@ -13,6 +14,7 @@ type FileParams = {
 };
 
 type IProps = {
+  className: string;
   handleStepChange: (params: StepChangeParams) => void;
   spaceName: string;
   docType: string;
@@ -30,7 +32,7 @@ const { Dragger } = Upload;
 const { TextArea } = Input;
 
 export default function DocUploadForm(props: IProps) {
-  const { handleStepChange, spaceName, docType } = props;
+  const { className, handleStepChange, spaceName, docType } = props;
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [spinning, setSpinning] = useState<boolean>(false);
@@ -186,7 +188,7 @@ export default function DocUploadForm(props: IProps) {
       <Form
         form={form}
         size="large"
-        className="mt-4"
+        className={classNames('mt-4', className)}
         layout="vertical"
         name="basic"
         initialValues={{ remember: true }}
diff --git a/web/pages/knowledge/index.tsx b/web/pages/knowledge/index.tsx
index 997ff588b..7f37fc920 100644
--- a/web/pages/knowledge/index.tsx
+++ b/web/pages/knowledge/index.tsx
@@ -9,6 +9,7 @@ import DocUploadForm from '@/components/knowledge/doc-upload-form';
 import SpaceForm from '@/components/knowledge/space-form';
 import DocTypeForm from '@/components/knowledge/doc-type-form';
 import Segmentation from '@/components/knowledge/segmentation';
+import classNames from 'classnames';
 
 const Knowledge = () => {
   const [spaceList, setSpaceList] = useState<Array<ISpace> | null>([]);
@@ -94,7 +95,12 @@ const Knowledge = () => {
         <Steps current={activeStep} items={addKnowledgeSteps} />
         {activeStep === 0 && <SpaceForm handleStepChange={handleStepChange} />}
         {activeStep === 1 && <DocTypeForm handleStepChange={handleStepChange} />}
-        {activeStep === 2 && <DocUploadForm spaceName={spaceName} docType={docType} handleStepChange={handleStepChange} />}
+        <DocUploadForm
+          className={classNames({ hidden: activeStep !== 2 })}
+          spaceName={spaceName}
+          docType={docType}
+          handleStepChange={handleStepChange}
+        />
         {activeStep === 3 && <Segmentation spaceName={spaceName} docType={docType} uploadFiles={files} handleStepChange={handleStepChange} />}
       </Modal>
     </div>