sammykumar-ComfyUI-SwissArmyKnife/dev-docs/web-js/UPLOAD_WIDGETS.md

Media Selection Upload Widgets

Overview

The MediaSelection node now features interactive upload widgets that provide a user-friendly way to upload images and videos directly through the ComfyUI interface when using "Upload Media" mode.

Features

Dynamic Upload Buttons

• 📁 Choose Image: Appears when media_type is set to "image"
• 📹 Choose Video: Appears when media_type is set to "video"
• Smart Visibility: Only the relevant upload button is shown based on media type selection

ComfyUI Integration

• Uses ComfyUI's built-in upload system (api.uploadImage() and upload endpoints)
• Proper file handling and storage in ComfyUI's input directory
• Seamless integration with existing ComfyUI workflow system

User Experience

• Click-to-upload: Simple button interface that opens file browser
• Visual Feedback: Button text updates to show selected filename
• File Type Filtering: File browser only shows relevant file types (images or videos)
• Error Handling: Clear feedback if upload fails

Implementation Details

Upload Process

1. File Selection: User clicks upload button → file browser opens
2. File Upload: Selected file is uploaded using ComfyUI's upload API
3. Path Storage: Uploaded file path is stored in the appropriate widget
4. UI Update: Button text updates to show selected filename
5. Node Refresh: Node is marked as changed to trigger workflow updates

File Handling

Images

• Uses api.uploadImage(file) for proper image handling
• Supports all standard image formats (PNG, JPG, WebP, etc.)
• Stored in ComfyUI's input directory

Videos

• Uses general upload endpoint (/upload/image) with video files
• Supports common video formats (MP4, AVI, MOV, etc.)
• Proper MIME type handling for video files

Widget State Management

The upload widgets work by converting the original text input widgets into interactive buttons:

// Convert text widget to upload button
originalUploadedImageWidget.type = 'button';
originalUploadedImageWidget.value = '📁 Choose Image';
originalUploadedImageWidget.callback = uploadHandler;

Backend Integration

The uploaded file paths are stored in the hidden text widgets that the Python backend expects:

• uploaded_image_file: Contains the path to uploaded image
• uploaded_video_file: Contains the path to uploaded video

Usage Guide

For Image Upload

1. Set media_source to "Upload Media"
2. Set media_type to "image"
3. Click the "📁 Choose Image" button
4. Select an image file from your computer
5. Button updates to show "📁 [filename]"
6. File is ready for processing

For Video Upload

1. Set media_source to "Upload Media"
2. Set media_type to "video"
3. Click the "📹 Choose Video" button
4. Select a video file from your computer
5. Button updates to show "📹 [filename]"
6. File is ready for processing

Dynamic Switching

You can switch between image and video upload by changing the media_type dropdown:

• Image → Video: Image upload button becomes hidden, video upload button appears
• Video → Image: Video upload button becomes hidden, image upload button appears

Technical Implementation

JavaScript Widget Code

The upload functionality is implemented in the MediaSelection node's JavaScript widget code:

// Show image upload widget
if (mediaType === 'image') {
    originalUploadedImageWidget.type = 'button';
    originalUploadedImageWidget.value = '📁 Choose Image';
    originalUploadedImageWidget.callback = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.onchange = async (e) => {
            const file = e.target.files[0];
            if (file) {
                const uploadResponse = await api.uploadImage(file);
                originalUploadedImageWidget.value = `📁 ${file.name}`;
                // Store path in hidden widget for backend
                hiddenImageWidget.value = uploadResponse.name;
            }
        };
        input.click();
    };
}

Error Handling

• Upload Failures: Button shows "Upload Failed" if upload encounters errors
• File Size Limits: Respects ComfyUI's maximum upload size settings
• Network Issues: Handles connection errors gracefully
• Invalid Files: File type validation prevents unsupported formats

Browser Cache Note

Important: After deploying this JavaScript update, users may need to:

• Hard refresh the browser (Ctrl+F5 / Cmd+Shift+R)
• Clear browser cache
• Restart ComfyUI server to ensure new JavaScript is loaded

Testing

Manual Testing Steps

1. Upload Image Test:

   • Set media_source to "Upload Media" and media_type to "image"
   • Verify "📁 Choose Image" button appears
   • Click button and select an image file
   • Verify button updates with filename
   • Execute workflow to confirm file processing

2. Upload Video Test:

   • Set media_source to "Upload Media" and media_type to "video"
   • Verify "📹 Choose Video" button appears
   • Click button and select a video file
   • Verify button updates with filename
   • Execute workflow to confirm file processing

3. Dynamic Switching Test:

   • Start with image upload, then switch to video upload
   • Verify only appropriate upload button is visible
   • Test switching back to image upload

Debug Console

Enable debug mode to see detailed console output:

[MediaSelection] Showing image upload widget
[MediaSelection] Image file selected: example.jpg
[MediaSelection] Image uploaded: {name: "example.jpg", ...}

Related Files

• web/js/swiss-army-knife.js - JavaScript widget implementation
• nodes/media_selection/media_selection.py - Python backend node
• docs/nodes/media-selection/MEDIA_SELECTION.md - Complete node documentation

---

Category: UI Enhancement Status: Implemented Version: 2.5.6+