[Feature] Add MP4 workflow file open support (#3950)

Author: christian-byrne

src/constants/supportedWorkflowFormats.ts

@@ -0,0 +1,72 @@
+/**
+ * Supported workflow file formats organized by type category
+ */
+
+/**
+ * All supported image formats that can contain workflow data
+ */
+export const IMAGE_WORKFLOW_FORMATS = {
+  extensions: ['.png', '.webp', '.svg'],
+  mimeTypes: ['image/png', 'image/webp', 'image/svg+xml']
+}
+
+/**
+ * All supported audio formats that can contain workflow data
+ */
+export const AUDIO_WORKFLOW_FORMATS = {
+  extensions: ['.mp3', '.ogg', '.flac'],
+  mimeTypes: ['audio/mpeg', 'audio/ogg', 'audio/flac', 'audio/x-flac']
+}
+
+/**
+ * All supported video formats that can contain workflow data
+ */
+export const VIDEO_WORKFLOW_FORMATS = {
+  extensions: ['.mp4', '.mov', '.m4v', '.webm'],
+  mimeTypes: ['video/mp4', 'video/quicktime', 'video/x-m4v', 'video/webm']
+}
+
+/**
+ * All supported 3D model formats that can contain workflow data
+ */
+export const MODEL_WORKFLOW_FORMATS = {
+  extensions: ['.glb'],
+  mimeTypes: ['model/gltf-binary']
+}
+
+/**
+ * All supported data formats that directly contain workflow data
+ */
+export const DATA_WORKFLOW_FORMATS = {
+  extensions: ['.json', '.latent', '.safetensors'],
+  mimeTypes: ['application/json']
+}
+
+/**
+ * Combines all supported formats into a single object
+ */
+export const ALL_WORKFLOW_FORMATS = {
+  extensions: [
+    ...IMAGE_WORKFLOW_FORMATS.extensions,
+    ...AUDIO_WORKFLOW_FORMATS.extensions,
+    ...VIDEO_WORKFLOW_FORMATS.extensions,
+    ...MODEL_WORKFLOW_FORMATS.extensions,
+    ...DATA_WORKFLOW_FORMATS.extensions
+  ],
+  mimeTypes: [
+    ...IMAGE_WORKFLOW_FORMATS.mimeTypes,
+    ...AUDIO_WORKFLOW_FORMATS.mimeTypes,
+    ...VIDEO_WORKFLOW_FORMATS.mimeTypes,
+    ...MODEL_WORKFLOW_FORMATS.mimeTypes,
+    ...DATA_WORKFLOW_FORMATS.mimeTypes
+  ]
+}
+
+/**
+ * Generate a comma-separated accept string for file inputs
+ * Combines all extensions and mime types
+ */
+export const WORKFLOW_ACCEPT_STRING = [
+  ...ALL_WORKFLOW_FORMATS.extensions,
+  ...ALL_WORKFLOW_FORMATS.mimeTypes
+].join(',')

src/scripts/ui.ts

@@ -1,3 +1,4 @@
+import { WORKFLOW_ACCEPT_STRING } from '@/constants/supportedWorkflowFormats'
 import { type StatusWsMessageStatus, TaskItem } from '@/schemas/apiSchema'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -386,7 +387,7 @@ export class ComfyUI {
     const fileInput = $el('input', {
       id: 'comfy-file-input',
       type: 'file',
-      accept: '.json,image/png,.latent,.safetensors,image/webp,audio/flac',
+      accept: WORKFLOW_ACCEPT_STRING,
       style: { display: 'none' },
       parent: document.body,
       onchange: async () => {