diff --git a/frontend/src/routes/_authenticated/knowledgeManagement.tsx b/frontend/src/routes/_authenticated/knowledgeManagement.tsx
index bc0253440..9666a9124 100644
--- a/frontend/src/routes/_authenticated/knowledgeManagement.tsx
+++ b/frontend/src/routes/_authenticated/knowledgeManagement.tsx
@@ -37,6 +37,7 @@ import {
   deleteCollection,
   deleteItem,
 } from "@/utils/fileUtils"
+import { isValidFile } from "shared/fileUtils"
 import type {
   Collection as CollectionType,
   CollectionItem,
@@ -640,6 +641,21 @@ function KnowledgeManagementContent() {
     setOpenDropdown(null)
   }
 
+  // Utility function to filter valid files and show error if none are valid
+  const getValidFilesOrShowError = (files: FileUploadSelectedFile[]) => {
+    const validFiles = files.filter(f => isValidFile(f.file))
+    
+    if (validFiles.length === 0) {
+      toast.error({
+        title: "Unsupported Files",
+        description: "No valid files to upload. All selected files are unsupported.",
+      })
+      return null
+    }
+    
+    return validFiles
+  }
+
   const handleUpload = async () => {
     if (selectedFiles.length === 0) {
       toast.error({
@@ -662,9 +678,13 @@ function KnowledgeManagementContent() {
       return
     }
 
-    // Start the global upload progress
-    const batches = createBatches(selectedFiles, collectionName.trim())
-    const files = selectedFiles.map(f => ({ file: f.file, id: f.id }))
+    // Filter out unsupported files before upload
+    const validFiles = getValidFilesOrShowError(selectedFiles)
+    if (!validFiles) return
+
+    // Start the global upload progress with only valid files
+    const batches = createBatches(validFiles, collectionName.trim())
+    const files = validFiles.map(f => ({ file: f.file, id: f.id }))
     const { uploadId, abortController } = startUpload(collectionName.trim(), files, batches.length, true)
 
     // Close the modal immediately after starting upload
@@ -858,9 +878,13 @@ function KnowledgeManagementContent() {
       return
     }
 
-    // Start the global upload progress
-    const batches = createBatches(selectedFiles, addingToCollection.name)
-    const files = selectedFiles.map(f => ({ file: f.file, id: f.id }))
+    // Filter out unsupported files before upload
+    const validFiles = getValidFilesOrShowError(selectedFiles)
+    if (!validFiles) return
+
+    // Start the global upload progress with only valid files
+    const batches = createBatches(validFiles, addingToCollection.name)
+    const files = validFiles.map(f => ({ file: f.file, id: f.id }))
     const { uploadId, abortController } = startUpload(addingToCollection.name, files, batches.length, false, addingToCollection.id)
 
     // Close the modal immediately after starting upload