Enhance file upload capabilities by adding support for additional file types (html, css, js, xml, md, excel, powerpoint) and updating related MIME type mappings. Improve user interface for file type selection in FileUpload component.

packages/components/nodes/documentloaders/File/File.ts

@@ -32,7 +32,7 @@ class File_DocumentLoaders implements INode {
         this.type = 'Document'
         this.icon = 'file.svg'
         this.category = 'Document Loaders'
-        this.description = `A generic file loader that can load txt, json, csv, docx, pdf, and other files`
+        this.description = `A generic file loader that can load different file types`
         this.baseClasses = [this.type]
         this.inputs = [
             {
@@ -214,6 +214,11 @@ class File_DocumentLoaders implements INode {
             json: (blob) => new JSONLoader(blob),
             jsonl: (blob) => new JSONLinesLoader(blob, '/' + pointerName.trim()),
             txt: (blob) => new TextLoader(blob),
+            html: (blob) => new TextLoader(blob),
+            css: (blob) => new TextLoader(blob),
+            js: (blob) => new TextLoader(blob),
+            xml: (blob) => new TextLoader(blob),
+            md: (blob) => new TextLoader(blob),
             csv: (blob) => new CSVLoader(blob),
             xls: (blob) => new LoadOfSheet(blob),
             xlsx: (blob) => new LoadOfSheet(blob),
@@ -301,6 +306,8 @@ const getOverrideFileInputs = (nodeData: INodeData) => {
     const jsonlinesFileBase64 = nodeData.inputs?.jsonlinesFile as string
     const docxFileBase64 = nodeData.inputs?.docxFile as string
     const yamlFileBase64 = nodeData.inputs?.yamlFile as string
+    const excelFileBase64 = nodeData.inputs?.excelFile as string
+    const powerpointFileBase64 = nodeData.inputs?.powerpointFile as string
 
     const removePrefix = (storageFile: string): string[] => {
         const fileName = storageFile.replace('FILE-STORAGE::', '')
@@ -333,6 +340,12 @@ const getOverrideFileInputs = (nodeData: INodeData) => {
     if (yamlFileBase64) {
         files.push(...removePrefix(yamlFileBase64))
     }
+    if (excelFileBase64) {
+        files.push(...removePrefix(excelFileBase64))
+    }
+    if (powerpointFileBase64) {
+        files.push(...removePrefix(powerpointFileBase64))
+    }
 
     return files.length ? `FILE-STORAGE::${JSON.stringify(files)}` : ''
 }

packages/components/src/utils.ts

@@ -1070,7 +1070,17 @@ export const mapMimeTypeToInputField = (mimeType: string) => {
         case 'text/jsonl':
             return 'jsonlinesFile'
         case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        case 'application/msword': {
             return 'docxFile'
+        }
+        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+        case 'application/vnd.ms-excel': {
+            return 'excelFile'
+        }
+        case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+        case 'application/vnd.ms-powerpoint': {
+            return 'powerpointFile'
+        }
         case 'application/vnd.yaml':
         case 'application/x-yaml':
         case 'text/vnd.yaml':
@@ -1091,6 +1101,19 @@ export const mapMimeTypeToExt = (mimeType: string) => {
     switch (mimeType) {
         case 'text/plain':
             return 'txt'
+        case 'text/html':
+            return 'html'
+        case 'text/css':
+            return 'css'
+        case 'text/javascript':
+        case 'application/javascript':
+            return 'js'
+        case 'text/xml':
+        case 'application/xml':
+            return 'xml'
+        case 'text/markdown':
+        case 'text/x-markdown':
+            return 'md'
         case 'application/pdf':
             return 'pdf'
         case 'application/json':
@@ -1109,6 +1132,10 @@ export const mapMimeTypeToExt = (mimeType: string) => {
             return 'xls'
         case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
             return 'xlsx'
+        case 'application/vnd.ms-powerpoint':
+            return 'ppt'
+        case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+            return 'pptx'
         default:
             return ''
     }

packages/server/src/utils/createAttachment.ts

@@ -172,7 +172,7 @@ export const createFileAttachment = async (req: Request) => {
                     content
                 })
             } catch (error) {
-                throw new Error(`Failed operation: createFileAttachment - ${getErrorMessage(error)}`)
+                throw new Error(`Failed createFileAttachment: ${file.originalname} (${file.mimetype} - ${getErrorMessage(error)}`)
             }
         }
     }

packages/ui/src/ui-component/extended/FileUpload.jsx

@@ -23,18 +23,20 @@ const message = `Uploaded files will be parsed as strings and sent to the LLM. I
 Refer <a href='https://docs.flowiseai.com/using-flowise/uploads#files' target='_blank'>docs</a> for more details.`
 
 const availableFileTypes = [
-    { name: 'CSS', ext: 'text/css' },
+    { name: 'CSS', ext: 'text/css', extension: '.css' },
-    { name: 'CSV', ext: 'text/csv' },
+    { name: 'CSV', ext: 'text/csv', extension: '.csv' },
-    { name: 'HTML', ext: 'text/html' },
+    { name: 'HTML', ext: 'text/html', extension: '.html' },
-    { name: 'JSON', ext: 'application/json' },
+    { name: 'JSON', ext: 'application/json', extension: '.json' },
-    { name: 'YAML', ext: 'application/x-yaml' },
+    { name: 'Markdown', ext: 'text/markdown', extension: '.md' },
-    { name: 'Markdown', ext: 'text/markdown' },
+    { name: 'YAML', ext: 'application/x-yaml', extension: '.yaml' },
-    { name: 'PDF', ext: 'application/pdf' },
+    { name: 'PDF', ext: 'application/pdf', extension: '.pdf' },
-    { name: 'SQL', ext: 'application/sql' },
+    { name: 'SQL', ext: 'application/sql', extension: '.sql' },
-    { name: 'Text File', ext: 'text/plain' },
+    { name: 'Text File', ext: 'text/plain', extension: '.txt' },
-    { name: 'XML', ext: 'application/xml' },
+    { name: 'XML', ext: 'application/xml', extension: '.xml' },
-    { name: 'DOC', ext: 'application/msword' },
+    { name: 'DOC', ext: 'application/msword', extension: '.doc' },
-    { name: 'DOCX', ext: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }
+    { name: 'DOCX', ext: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extension: '.docx' },
+    { name: 'XLSX', ext: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extension: '.xlsx' },
+    { name: 'PPTX', ext: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extension: '.pptx' }
 ]
 
 const FileUpload = ({ dialogProps }) => {
@@ -222,30 +224,45 @@ const FileUpload = ({ dialogProps }) => {
                             onChange={handleAllowedFileTypesChange}
                         />
                         <label htmlFor={fileType.ext} style={{ marginLeft: 10 }}>
-                            {fileType.name} ({fileType.ext})
+                            {fileType.name} ({fileType.extension})
                         </label>
                     </div>
                 ))}
             </div>
 
-            <Box sx={{ marginBottom: 3 }}>
+            {allowedFileTypes.includes('application/pdf') && fullFileUpload && (
-                <Typography sx={{ fontSize: 14, fontWeight: 500, marginBottom: 1 }}>PDF Usage</Typography>
+                <Box
-                <FormControl disabled={!fullFileUpload}>
+                    sx={{
-                    <RadioGroup name='pdf-usage' value={pdfUsage} onChange={handlePdfUsageChange}>
+                        borderRadius: 2,
-                        <FormControlLabel value='perPage' control={<Radio />} label='One document per page' />
+                        border: '1px solid #e0e0e0',
-                        <FormControlLabel value='perFile' control={<Radio />} label='One document per file' />
+                        backgroundColor: '#fafafa',
-                    </RadioGroup>
+                        padding: 3,
-                </FormControl>
+                        marginBottom: 3,
-            </Box>
+                        marginTop: 2
+                    }}
+                >
+                    <Typography sx={{ fontSize: 16, fontWeight: 600, marginBottom: 2, color: '#424242' }}>PDF Configuration</Typography>
 
-            <Box sx={{ marginBottom: 3 }}>
+                    <Box>
-                <SwitchInput
+                        <Typography sx={{ fontSize: 14, fontWeight: 500, marginBottom: 1 }}>PDF Usage</Typography>
-                    label='Use Legacy Build (for PDF compatibility issues)'
+                        <FormControl disabled={!fullFileUpload}>
-                    onChange={handleLegacyBuildChange}
+                            <RadioGroup name='pdf-usage' value={pdfUsage} onChange={handlePdfUsageChange}>
-                    value={pdfLegacyBuild}
+                                <FormControlLabel value='perPage' control={<Radio />} label='One document per page' />
-                    disabled={!fullFileUpload}
+                                <FormControlLabel value='perFile' control={<Radio />} label='One document per file' />
-                />
+                            </RadioGroup>
-            </Box>
+                        </FormControl>
+                    </Box>
+
+                    <Box>
+                        <SwitchInput
+                            label='Use Legacy Build (for PDF compatibility issues)'
+                            onChange={handleLegacyBuildChange}
+                            value={pdfLegacyBuild}
+                            disabled={!fullFileUpload}
+                        />
+                    </Box>
+                </Box>
+            )}
 
             <StyledButton style={{ marginBottom: 10, marginTop: 20 }} variant='contained' onClick={onSave}>
                 Save