diff --git a/web/src/views/Workflow/components/Properties/VariableSelect.tsx b/web/src/views/Workflow/components/Properties/VariableSelect.tsx
index a5428a60..38c48dba 100644
--- a/web/src/views/Workflow/components/Properties/VariableSelect.tsx
+++ b/web/src/views/Workflow/components/Properties/VariableSelect.tsx
@@ -20,7 +20,7 @@ interface VariableSelectProps {
   multiple?: boolean;
   size?: 'small' | 'middle' | 'large';
   placeholder?: string;
-  variant?: 'outlined' | 'borderless';
+  variant?: 'outlined' | 'borderless' | 'filled';
   className?: string;
   onChange?: (value: string | string[], option: Suggestion | Suggestion[] | undefined) => void;
 }
@@ -190,12 +190,12 @@ const VariableSelect: FC<VariableSelectProps> = ({
       {/* Trigger */}
       <div
         className={clsx(
-          'rb:w-full rb:flex rb:items-center rb:justify-between rb:cursor-pointer rb:rounded-md rb:bg-white rb:px-2 rb:transition-colors',
-          variant === 'outlined' && 'rb:border rb:border-[#d9d9d9] hover:rb:border-[#4096ff]',
+          'rb:w-full rb:flex rb:items-center rb:justify-between rb:cursor-pointer rb:rounded-md rb:px-2 rb:transition-colors',
+          variant === 'outlined' && 'rb:border rb:border-[#d9d9d9] hover:rb:border-[#4096ff] rb:bg-white',
           variant === 'outlined' && open && 'rb:border-[#4096ff] rb:shadow-[0_0_0_2px_rgba(5,145,255,0.1)]',
           variant === 'borderless' && 'rb:border-none rb:shadow-none rb:bg-transparent',
           multiple && size === 'small' ? 'rb:min-h-6 rb:py-0.75' : multiple ? 'rb:min-h-8 rb:py-1' : size === 'small' ? 'rb:h-6 rb:text-[10px]' : size === 'large' ? 'rb:h-10' : 'rb:h-8 rb:text-[12px]',
-          !multiple && (size === 'small' ? 'rb:text-[10px]' : 'rb:text-[12px]'),
+          !multiple && (size === 'small' ? 'rb:text-[12px]' : 'rb:text-[12px]'),
           className
         )}
         onClick={() => setOpen(o => !o)}
diff --git a/web/src/views/Workflow/components/Properties/index.tsx b/web/src/views/Workflow/components/Properties/index.tsx
index b2a82318..1270a4de 100644
--- a/web/src/views/Workflow/components/Properties/index.tsx
+++ b/web/src/views/Workflow/components/Properties/index.tsx
@@ -38,6 +38,7 @@ import RbCard from '@/components/RbCard/Card';
 import ModelConfig from './ModelConfig'
 import ModelSelect from '@/components/ModelSelect'
 import ListOperator from './ListOperator'
+import type { Variable } from "./VariableList/types";
 
 /**
  * Props for Properties component
@@ -229,7 +230,6 @@ const Properties: FC<PropertiesProps> = ({
       }
       return filteredList;
     };
-
     if (nodeType === 'llm') {
       // For LLM nodes that are children of iteration or loop nodes, include parent variables
       const parentLoopNode = selectedNode ? (() => {
@@ -790,8 +790,25 @@ const Properties: FC<PropertiesProps> = ({
                                                   return nodeTypeMatch || variableNameMatch;
                                                 });
                                               }
-                                              if (config.onFilterVariableNames) {
-                                                return baseVariableList.filter(variable => Array.isArray(config.onFilterVariableNames) && config.onFilterVariableNames.includes(variable.label));
+                                              if (config.onFilterVariableType) {
+                                                const types = config.onFilterVariableType as string[];
+                                                let list: Suggestion[] = []
+                                                baseVariableList.forEach((variable) => {
+                                                  if (variable.children?.length) {
+                                                    const filteredChildren = variable.children.filter((c: Suggestion) => types.includes(c.dataType));
+                                                    console.log('filteredChildren', filteredChildren)
+                                                    if (filteredChildren.length > 0) {
+                                                      list.push({ ...variable, children: filteredChildren });
+                                                    } else if (types.includes(variable.dataType)) {
+                                                      list.push({ ...variable, children: [] });
+                                                    }
+                                                  } else if (types.includes(variable.dataType)) {
+                                                    list.push(variable);
+                                                  }
+                                                });
+
+                                                console.log('list', list)
+                                                return list
                                               }
                                               // Filter child nodes for iteration output
                                               if (config.filterChildNodes && selectedNode) {
@@ -812,7 +829,7 @@ const Properties: FC<PropertiesProps> = ({
                                               }
                                               return baseVariableList;
                                             })()}
-                                            onChange={(value, option) => handleChangeVariableList(value, option, key)}
+                                            onChange={(value, option) => handleChangeVariableList(value as string, option, key)}
                                             size="small"
                                           />
                                           : config.type === 'switch'
diff --git a/web/src/views/Workflow/constant.ts b/web/src/views/Workflow/constant.ts
index 7909d183..9621d968 100644
--- a/web/src/views/Workflow/constant.ts
+++ b/web/src/views/Workflow/constant.ts
@@ -128,7 +128,7 @@ export const nodeLibrary: NodeLibrary[] = [
           },
           vision_input: {
             type: 'variableList',
-            onFilterVariableNames: ['sys.files']
+            onFilterVariableType: ['array[file]']
           }
         }
       },
@@ -457,7 +457,7 @@ export const nodeLibrary: NodeLibrary[] = [
           file_selector: {
             type: 'variableList',
             placeholder: 'common.pleaseSelect',
-            onFilterVariableNames: ['sys.files']
+            onFilterVariableType: ['array[file]', 'file']
           }
         }
       },