diff --git a/web/src/constants/common.ts b/web/src/constants/common.ts
index 45a6b64771..7db0372ac5 100644
--- a/web/src/constants/common.ts
+++ b/web/src/constants/common.ts
@@ -199,6 +199,9 @@ export const ExceptiveType = [
   'docx',
   'md',
   'mdx',
+  'txt',
+  'csv',
+  'pptx',
   ...Images,
 ];
 
diff --git a/web/src/pages/document-viewer/index.tsx b/web/src/pages/document-viewer/index.tsx
index 02c07faeae..13d5f53205 100644
--- a/web/src/pages/document-viewer/index.tsx
+++ b/web/src/pages/document-viewer/index.tsx
@@ -16,6 +16,7 @@ import PdfPreview from '@/components/document-preview/pdf-preview';
 import { PptPreviewer } from '@/components/document-preview/ppt-preview';
 import { TxtPreviewer } from '@/components/document-preview/txt-preview';
 import { previewHtmlFile } from '@/utils/file-util';
+import CSVFileViewer from '@/components/document-preview/csv-preview';
 // import styles from './index.less';
 
 // TODO: The interface returns an incorrect content-type for the SVG.
@@ -56,6 +57,11 @@ const DocumentViewer = () => {
       {(ext === 'xlsx' || ext === 'xls') && (
         <ExcelCsvPreviewer url={api}></ExcelCsvPreviewer>
       )}
+      {ext === 'csv' && (
+        <section className="m-1">
+          <CSVFileViewer url={api} />
+        </section>
+      )}
 
       {ext === 'docx' && <DocPreviewer url={api}></DocPreviewer>}