fix: firmware page styling

public/app.js

@@ -21,7 +21,8 @@ document.addEventListener('DOMContentLoaded', function() {
             // Extract node information for firmware view
             const nodes = members.map(member => ({
                 ip: member.ip,
-                hostname: member.hostname || member.ip
+                hostname: member.hostname || member.ip,
+                labels: member.labels || {}
             }));
             firmwareViewModel.updateAvailableNodes(nodes);
             console.log('App: Updated firmware view model with nodes:', nodes);
@@ -67,6 +68,33 @@ document.addEventListener('DOMContentLoaded', function() {
     console.log('=== SPORE UI Application initialization completed ===');
 });
 
+// Burger menu toggle for mobile
+(function setupBurgerMenu(){
+	document.addEventListener('DOMContentLoaded', function(){
+		const nav = document.querySelector('.main-navigation');
+		const burger = document.getElementById('burger-btn');
+		const navLeft = nav ? nav.querySelector('.nav-left') : null;
+		if (!nav || !burger || !navLeft) return;
+		burger.addEventListener('click', function(e){
+			e.preventDefault();
+			nav.classList.toggle('mobile-open');
+		});
+		// Close menu when a nav tab is clicked
+		navLeft.addEventListener('click', function(e){
+			const btn = e.target.closest('.nav-tab');
+			if (btn && nav.classList.contains('mobile-open')) {
+				nav.classList.remove('mobile-open');
+			}
+		});
+		// Close menu on outside click
+		document.addEventListener('click', function(e){
+			if (!nav.contains(e.target) && nav.classList.contains('mobile-open')) {
+				nav.classList.remove('mobile-open');
+			}
+		});
+	});
+})();
+
 // Set up periodic updates with state preservation
 function setupPeriodicUpdates() {
     // Auto-refresh cluster members every 30 seconds using smart update

public/components.js

@@ -1274,6 +1274,25 @@ class FirmwareComponent extends Component {
             console.warn('FirmwareComponent: specificNodeSelect element not found during setupEventListeners');
         }
         
+        // Setup label select change handler (single-select add-to-chips)
+        const labelSelect = this.findElement('#label-select');
+        if (labelSelect) {
+            this._boundLabelSelectHandler = (e) => {
+                const value = e.target.value;
+                if (!value) return;
+                const current = this.viewModel.get('selectedLabels') || [];
+                if (!current.includes(value)) {
+                    this.viewModel.setSelectedLabels([...current, value]);
+                }
+                // Reset select back to placeholder
+                e.target.value = '';
+                this.renderSelectedLabelChips();
+                this.updateAffectedNodesPreview();
+                this.updateDeployButton();
+            };
+            this.addEventListener(labelSelect, 'change', this._boundLabelSelectHandler);
+        }
+        
         // Setup deploy button
         const deployBtn = this.findElement('#deploy-btn');
         if (deployBtn) {
@@ -1289,15 +1308,23 @@ class FirmwareComponent extends Component {
         this.subscribeToProperty('targetType', () => {
             this.updateTargetVisibility();
             this.updateDeployButton();
+            this.updateAffectedNodesPreview();
         });
         this.subscribeToProperty('specificNode', this.updateDeployButton.bind(this));
         this.subscribeToProperty('availableNodes', () => {
             this.populateNodeSelect();
+            this.populateLabelSelect();
             this.updateDeployButton();
+            this.updateAffectedNodesPreview();
         });
         this.subscribeToProperty('uploadProgress', this.updateUploadProgress.bind(this));
         this.subscribeToProperty('uploadResults', this.updateUploadResults.bind(this));
         this.subscribeToProperty('isUploading', this.updateUploadState.bind(this));
+        this.subscribeToProperty('selectedLabels', () => {
+            this.populateLabelSelect();
+            this.updateAffectedNodesPreview();
+            this.updateDeployButton();
+        });
     }
 
     mount() {
@@ -1314,6 +1341,15 @@ class FirmwareComponent extends Component {
             console.log('FirmwareComponent: Mount - dropdown innerHTML:', dropdown.innerHTML);
         }
         
+        // Initialize target visibility and label list on first mount
+        try {
+            this.updateTargetVisibility();
+            this.populateLabelSelect();
+            this.updateAffectedNodesPreview();
+        } catch (e) {
+            console.warn('FirmwareComponent: Initialization after mount failed:', e);
+        }
+        
         console.log('FirmwareComponent: Mounted successfully');
     }
 
@@ -1365,8 +1401,10 @@ class FirmwareComponent extends Component {
             
             if (targetType === 'all') {
                 await this.uploadToAllNodes(file);
-            } else {
+            } else if (targetType === 'specific') {
                 await this.uploadToSpecificNode(file, specificNode);
+            } else if (targetType === 'labels') {
+                await this.uploadToLabelFilteredNodes(file);
             }
             
             // Reset interface after successful upload
@@ -1451,6 +1489,31 @@ class FirmwareComponent extends Component {
         }
     }
 
+    async uploadToLabelFilteredNodes(file) {
+        try {
+            const nodes = this.viewModel.getAffectedNodesByLabels();
+            if (!nodes || nodes.length === 0) {
+                alert('No nodes match the selected labels.');
+                return;
+            }
+            const labels = this.viewModel.get('selectedLabels') || [];
+            const confirmed = confirm(`Upload firmware to ${nodes.length} node(s) matching labels (${labels.join(', ')})?`);
+            if (!confirmed) return;
+            
+            // Show upload progress area
+            this.showUploadProgress(file, nodes);
+            
+            // Start batch upload
+            const results = await this.performBatchUpload(file, nodes);
+            
+            // Display results
+            this.displayUploadResults(results);
+        } catch (error) {
+            console.error('Failed to upload firmware to label-filtered nodes:', error);
+            throw error;
+        }
+    }
+
     async performBatchUpload(file, nodes) {
         const results = [];
         const totalNodes = nodes.length;
@@ -1671,31 +1734,24 @@ class FirmwareComponent extends Component {
     updateTargetVisibility() {
         const targetType = this.viewModel.get('targetType');
         const specificNodeSelect = this.findElement('#specific-node-select');
+        const labelSelect = this.findElement('#label-select');
         
         console.log('FirmwareComponent: updateTargetVisibility called with targetType:', targetType);
         
         if (targetType === 'specific') {
-            specificNodeSelect.style.visibility = 'visible';
+            if (specificNodeSelect) { specificNodeSelect.style.display = 'inline-block'; }
-            specificNodeSelect.style.opacity = '1';
+            if (labelSelect) { labelSelect.style.display = 'none'; }
-            console.log('FirmwareComponent: Showing specific node select');
+            this.populateNodeSelect();
-            
+        } else if (targetType === 'labels') {
-            // Check if the dropdown exists and is ready
+            if (specificNodeSelect) { specificNodeSelect.style.display = 'none'; }
-            if (specificNodeSelect && specificNodeSelect.tagName === 'SELECT') {
+            if (labelSelect) {
-                console.log('FirmwareComponent: Dropdown is ready, populating immediately');
+                labelSelect.style.display = 'inline-block';
-                this.populateNodeSelect();
+                this.populateLabelSelect();
-            } else {
-                console.log('FirmwareComponent: Dropdown not ready, delaying population');
-                // Small delay to ensure the dropdown is visible before populating
-                setTimeout(() => {
-                    this.populateNodeSelect();
-                }, 100);
             }
         } else {
-            specificNodeSelect.style.visibility = 'hidden';
+            if (specificNodeSelect) { specificNodeSelect.style.display = 'none'; }
-            specificNodeSelect.style.opacity = '0';
+            if (labelSelect) { labelSelect.style.display = 'none'; }
-            console.log('FirmwareComponent: Hiding specific node select');
         }
-        
         this.updateDeployButton();
     }
 
@@ -1795,6 +1851,75 @@ class FirmwareComponent extends Component {
         
         this.updateDeployButton();
     }
+
+    populateLabelSelect() {
+        const select = this.findElement('#label-select');
+        if (!select) return;
+        const labels = this.viewModel.get('availableLabels') || [];
+        const selected = new Set(this.viewModel.get('selectedLabels') || []);
+        const options = ['<option value="">Select a label...</option>']
+            .concat(labels.filter(l => !selected.has(l)).map(l => `<option value="${l}">${l}</option>`));
+        select.innerHTML = options.join('');
+        // Ensure change listener remains bound
+        if (this._boundLabelSelectHandler) {
+            select.removeEventListener('change', this._boundLabelSelectHandler);
+            select.addEventListener('change', this._boundLabelSelectHandler);
+        }
+        this.renderSelectedLabelChips();
+    }
+
+    renderSelectedLabelChips() {
+        const container = this.findElement('#selected-labels-container');
+        if (!container) return;
+        const selected = this.viewModel.get('selectedLabels') || [];
+        if (selected.length === 0) {
+            container.innerHTML = '';
+            return;
+        }
+        container.innerHTML = selected.map(l => `
+            <span class="label-chip removable" data-label="${l}">
+                ${l}
+                <button class="chip-remove" data-label="${l}" title="Remove">×</button>
+            </span>
+        `).join('');
+        Array.from(container.querySelectorAll('.chip-remove')).forEach(btn => {
+            this.addEventListener(btn, 'click', (e) => {
+                e.stopPropagation();
+                const label = btn.getAttribute('data-label');
+                const current = this.viewModel.get('selectedLabels') || [];
+                this.viewModel.setSelectedLabels(current.filter(x => x !== label));
+                this.populateLabelSelect();
+                this.updateAffectedNodesPreview();
+                this.updateDeployButton();
+            });
+        });
+    }
+
+    updateAffectedNodesPreview() {
+        const container = this.findElement('#firmware-nodes-list');
+        if (!container) return;
+        if (this.viewModel.get('targetType') !== 'labels') {
+            container.innerHTML = '';
+            return;
+        }
+        const nodes = this.viewModel.getAffectedNodesByLabels();
+        if (!nodes.length) {
+            container.innerHTML = `<div class="empty-state"><div>No nodes match the selected labels</div></div>`;
+            return;
+        }
+        const html = `
+            <div class="affected-nodes">
+                <div class="progress-header"><h3>🎯 Affected Nodes (${nodes.length})</h3></div>
+                <div class="progress-list">
+                    ${nodes.map(n => `
+                        <div class="progress-item" data-node-ip="${n.ip}">
+                            <div class="progress-node-info"><span class="node-name">${n.hostname || n.ip}</span><span class="node-ip">${n.ip}</span></div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>`;
+        container.innerHTML = html;
+    }
 }
 
 // Cluster View Component

public/index.html

@@ -9,6 +9,11 @@
 <body>
             <div class="container">
             <div class="main-navigation">
+                <button class="burger-btn" id="burger-btn" aria-label="Menu" title="Menu">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 6h18M3 12h18M3 18h18"/>
+                    </svg>
+                </button>
                 <div class="nav-left">
                     <button class="nav-tab active" data-view="cluster">🌐 Cluster</button>
                     <button class="nav-tab" data-view="firmware">📦 Firmware</button>
@@ -85,6 +90,15 @@
                                                         <option value="">Select a node...</option>
                                                     </select>
                                                 </label>
+                                                <label class="target-option by-label-option">
+                                                    <input type="radio" name="target-type" value="labels">
+                                                    <span class="radio-custom"></span>
+                                                    <span class="target-label">By Label</span>
+                                                    <select id="label-select" class="label-select" style="min-width: 220px; display: inline-block; vertical-align: middle;">
+                                                        <option value="">Select a label...</option>
+                                                    </select>
+                                                    <div id="selected-labels-container" class="selected-labels"></div>
+                                                </label>
                                             </div>
                                             
                                             <div class="file-input-wrapper">

public/styles.css

@@ -852,9 +852,9 @@ p {
 }
 
 .action-group:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: rgba(0, 0, 0, 0.2);
-    border-color: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: none;
 }
 
 .action-group h3 {
@@ -877,7 +877,7 @@ p {
     gap: 1rem;
     align-items: center;
     padding: 1rem;
-    background: rgba(0, 0, 0, 0.2);
+    background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     transition: all 0.2s ease;
@@ -886,28 +886,18 @@ p {
 }
 
 .compact-upload-row::before {
-    content: '';
+    content: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 12px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    pointer-events: none;
 }
 
 .compact-upload-row:hover::before {
-    opacity: 1;
+    opacity: 0;
 }
 
 .compact-upload-row:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: transparent;
-    border-color: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+    box-shadow: none;
-    transform: translateY(-2px);
+    transform: none;
 }
 
 .file-upload-area {
@@ -995,6 +985,7 @@ p {
     gap: 0.75rem;
     justify-content: flex-start;
     align-items: center;
+    min-height: 36px;
 }
 
 .target-option {
@@ -1010,10 +1001,10 @@ p {
 }
 
 .target-option:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: transparent;
     border-color: transparent;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: none;
-    transform: translateY(-1px);
+    transform: none;
 }
 
 .target-option input[type="radio"] {
@@ -1023,18 +1014,17 @@ p {
 .radio-custom {
     width: 14px;
     height: 14px;
-    border: 2px solid rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     position: relative;
-    transition: all 0.2s ease;
     background: rgba(0, 0, 0, 0.2);
 }
 
 .target-option input[type="radio"]:checked + .radio-custom {
     border-color: #667eea;
     background: #667eea;
-    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+    box-shadow: none;
-    transform: scale(1.05);
+    transform: none;
 }
 
 .target-option input[type="radio"]:checked + .radio-custom::after {
@@ -1047,7 +1037,6 @@ p {
     height: 5px;
     background: white;
     border-radius: 50%;
-    animation: radioPop 0.2s ease-out;
 }
 
 @keyframes radioPop {
@@ -1243,6 +1232,7 @@ p {
         gap: 0.75rem;
         flex-wrap: wrap;
         align-items: center;
+        min-height: 40px;
     }
     
     .target-option {
@@ -1271,8 +1261,6 @@ p {
         min-width: auto;
         width: auto;
         padding: 0.4rem 0.6rem;
-        visibility: visible;
-        opacity: 1;
         font-size: 0.8rem;
         flex: 1;
         min-width: 120px;
@@ -1741,11 +1729,10 @@ p {
 
 .specific-node-option .node-select {
     margin-left: 0.5rem;
-    visibility: hidden;
+    display: none;
-    opacity: 0;
-    transition: opacity 0.2s ease;
 }
 
+
 /* Capabilities Styles */
 .capabilities-list {
 	margin-top: 0.5rem;
@@ -2108,3 +2095,212 @@ p {
 		padding: 0.35rem 0.75rem;
 	}
 } 
+
+.label-select {
+	background: rgba(0, 0, 0, 0.2);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	color: #ffffff;
+	padding: 0.3rem 2rem 0.3rem 0.5rem;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	transition: all 0.2s ease;
+	cursor: pointer;
+	min-width: 160px;
+	font-weight: 500;
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+	appearance: none;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ecf0f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
+	background-repeat: no-repeat;
+	background-position: right 0.5rem center;
+	background-size: 12px 12px;
+}
+
+.label-select:hover {
+	background-color: rgba(0, 0, 0, 0.25);
+	border-color: rgba(255, 255, 255, 0.15);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+	transform: translateY(-1px);
+}
+
+.label-select:focus {
+	outline: none;
+	border-color: #667eea;
+	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+	background-color: rgba(0, 0, 0, 0.3);
+}
+
+.label-select option {
+	background: #1a202c;
+	color: #ffffff;
+}
+
+.label-select option:hover {
+	background: #2d3748;
+}
+
+.label-select option:checked {
+	background: #667eea;
+	color: #ffffff;
+	font-weight: 600;
+}
+
+.label-select:invalid {
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.label-select:valid {
+	color: #ffffff;
+}
+
+.selected-labels {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.35rem;
+	margin-left: 0.5rem;
+	max-width: 100%;
+}
+
+.label-chip.removable {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	padding-right: 0.25rem;
+	background: rgba(139, 92, 246, 0.15);
+	border: 1px solid rgba(139, 92, 246, 0.35);
+}
+
+.label-chip .chip-remove {
+	appearance: none;
+	background: transparent;
+	border: none;
+	color: rgba(255, 255, 255, 0.85);
+	cursor: pointer;
+	font-size: 0.85rem;
+	line-height: 1;
+	padding: 0 0.25rem;
+	border-radius: 9999px;
+	transition: background 0.15s ease, transform 0.15s ease;
+}
+
+.label-chip .chip-remove:hover {
+	background: rgba(255, 255, 255, 0.12);
+	transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+	.by-label-option {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		flex-wrap: wrap;
+	}
+	.by-label-option .target-label {
+		white-space: nowrap;
+	}
+	.by-label-option .label-select {
+		flex: 0 1 55%;
+		min-width: 120px;
+		max-width: 60%;
+	}
+	#selected-labels-container.selected-labels {
+		flex: 1 1 100%;
+		min-width: 0;
+		margin-left: 0;
+	}
+}
+
+@media (max-width: 480px) {
+	.label-select {
+		padding: 0.3rem 1.5rem 0.3rem 0.5rem;
+		background-position: right 0.4rem center;
+		background-size: 10px 10px;
+	}
+} 
+
+.compact-upload-row,
+.file-upload-area,
+.file-input-wrapper {
+	max-width: 100%;
+}
+
+.label-select {
+	max-width: 100%;
+}
+
+/* Keep By Label on a single line for the label + select, but allow chips to wrap below */
+@media (max-width: 768px) {
+	.by-label-option {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		flex-wrap: wrap;
+	}
+	.by-label-option .target-label {
+		white-space: nowrap;
+	}
+	.by-label-option .label-select {
+		flex: 0 1 55%;
+		min-width: 120px;
+		max-width: 60%;
+	}
+	#selected-labels-container.selected-labels {
+		flex: 1 1 100%;
+		min-width: 0;
+		margin-left: 0;
+	}
+}
+
+/* Burger menu */
+.burger-btn {
+	display: none;
+	background: transparent;
+	border: 1px solid rgba(255, 255, 255, 0.15);
+	color: rgba(255, 255, 255, 0.9);
+	padding: 0.5rem;
+	border-radius: 10px;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+}
+
+.burger-btn svg {
+	width: 18px;
+	height: 18px;
+	stroke: currentColor;
+	stroke-width: 2;
+}
+
+@media (max-width: 768px) {
+	.main-navigation {
+		position: relative;
+	}
+	.burger-btn {
+		display: inline-flex;
+		margin-right: 0.5rem;
+	}
+	.nav-left {
+		display: none;
+	}
+	.main-navigation.mobile-open .nav-left {
+		display: flex;
+		flex-direction: column;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.6);
+		border: 1px solid rgba(255, 255, 255, 0.12);
+		border-radius: 12px;
+		padding: 0.5rem;
+		gap: 0.25rem;
+		z-index: 50;
+	}
+	.main-navigation.mobile-open .nav-left .nav-tab {
+		width: 100%;
+		text-align: left;
+	}
+}

public/view-models.js

@@ -315,7 +315,9 @@ class FirmwareViewModel extends ViewModel {
             availableNodes: [],
             uploadProgress: null,
             uploadResults: [],
-            isUploading: false
+            isUploading: false,
+            selectedLabels: [],
+            availableLabels: []
         });
     }
 
@@ -327,6 +329,11 @@ class FirmwareViewModel extends ViewModel {
     // Set target type
     setTargetType(type) {
         this.set('targetType', type);
+        // Clear any previously selected labels when switching options
+        const currentLabels = this.get('selectedLabels') || [];
+        if (currentLabels.length > 0) {
+            this.set('selectedLabels', []);
+        }
     }
 
     // Set specific node
@@ -337,6 +344,27 @@ class FirmwareViewModel extends ViewModel {
     // Update available nodes
     updateAvailableNodes(nodes) {
         this.set('availableNodes', nodes);
+        // Compute availableLabels as unique key=value pairs from nodes' labels
+        try {
+            const labelSet = new Set();
+            (nodes || []).forEach(n => {
+                const labels = n && n.labels ? n.labels : {};
+                Object.entries(labels).forEach(([k, v]) => {
+                    labelSet.add(`${k}=${v}`);
+                });
+            });
+            const availableLabels = Array.from(labelSet).sort((a, b) => a.localeCompare(b));
+            this.set('availableLabels', availableLabels);
+            // Prune selected labels that are no longer available
+            const selected = this.get('selectedLabels') || [];
+            const pruned = selected.filter(x => availableLabels.includes(x));
+            if (pruned.length !== selected.length) {
+                this.set('selectedLabels', pruned);
+            }
+        } catch (_) {
+            this.set('availableLabels', []);
+            this.set('selectedLabels', []);
+        }
     }
 
     // Start upload
@@ -379,6 +407,26 @@ class FirmwareViewModel extends ViewModel {
         this.set('isUploading', false);
     }
 
+    // Set selected labels
+    setSelectedLabels(labels) {
+        this.set('selectedLabels', Array.isArray(labels) ? labels : []);
+    }
+
+    // Return nodes matching ALL selected label pairs
+    getAffectedNodesByLabels() {
+        const selected = this.get('selectedLabels') || [];
+        if (!selected.length) return [];
+        const selectedPairs = selected.map(s => {
+            const idx = String(s).indexOf('=');
+            return idx > -1 ? { key: s.slice(0, idx), value: s.slice(idx + 1) } : null;
+        }).filter(Boolean);
+        const nodes = this.get('availableNodes') || [];
+        return nodes.filter(n => {
+            const labels = n && n.labels ? n.labels : {};
+            return selectedPairs.every(p => String(labels[p.key]) === String(p.value));
+        });
+    }
+
     // Check if deploy button should be enabled
     isDeployEnabled() {
         const hasFile = this.get('selectedFile') !== null;
@@ -390,6 +438,9 @@ class FirmwareViewModel extends ViewModel {
             isValidTarget = hasAvailableNodes;
         } else if (this.get('targetType') === 'specific') {
             isValidTarget = hasAvailableNodes && this.get('specificNode');
+        } else if (this.get('targetType') === 'labels') {
+            const affected = this.getAffectedNodesByLabels();
+            isValidTarget = hasAvailableNodes && (this.get('selectedLabels') || []).length > 0 && affected.length > 0;
         }
         
         return hasFile && isValidTarget && !this.get('isUploading');