After uploading the image I see the correct preview, but clicking the "2. customize overlays" doesn't change it and when I click any of the download buttons I get the message "Please upload an image first"

script.js

@@ -82,10 +82,10 @@ document.addEventListener('DOMContentLoaded', function() {
             previewImage.src = e.target.result;
             previewImage.classList.remove('hidden');
             placeholderText.classList.add('hidden');
+            currentFile = e.target.result; // Store the data URL
         };
         reader.readAsDataURL(file);
     }
-
     function applyOverlay(type, color) {
         // Clear previous overlay
         overlayContainer.innerHTML = '';
@@ -101,11 +101,40 @@ document.addEventListener('DOMContentLoaded', function() {
         overlay.classList.add(position);
         overlay.classList.add(size);
         
+        // Add visual feedback
+        const preview = document.createElement('div');
+        preview.style.position = 'absolute';
+        preview.style.borderRadius = type === 'badge' ? '50%' : '0';
+        
+        // Set color
+        preview.style.backgroundColor = color === 'red' ? '#ef4444' :
+                                      color === 'blue' ? '#3b82f6' :
+                                      color === 'green' ? '#10b981' : '#eab308';
+        
+        // Set size and position based on selections
+        if (type === 'banner') {
+            preview.style.width = '100%';
+            preview.style.height = size === 'small' ? '10%' :
+                                  size === 'medium' ? '15%' : '20%';
+            preview.style.top = position.includes('bottom') ? 'auto' : '0';
+            preview.style.bottom = position.includes('bottom') ? '0' : 'auto';
+        } else { // badge
+            const badgeSize = size === 'small' ? '20%' :
+                             size === 'medium' ? '25%' : '30%';
+            preview.style.width = badgeSize;
+            preview.style.height = badgeSize;
+            
+            if (position.includes('top')) preview.style.top = '0';
+            if (position.includes('bottom')) preview.style.bottom = '0';
+            if (position.includes('left')) preview.style.left = '0';
+            if (position.includes('right')) preview.style.right = '0';
+        }
+        
+        overlay.appendChild(preview);
         overlayContainer.appendChild(overlay);
         currentOverlay = overlay;
     }
-
-    function updateOverlay() {
+function updateOverlay() {
         if (!currentOverlay) return;
         
         // Remove all position and size classes
@@ -119,20 +148,52 @@ document.addEventListener('DOMContentLoaded', function() {
         currentOverlay.classList.add(positionSelect.value);
         currentOverlay.classList.add(sizeSelect.value);
     }
-
     function downloadImage(format) {
-        if (!previewImage.src || previewImage.src.startsWith('data:')) {
+        if (!currentFile) {
             alert('Please upload an image first');
             return;
         }
         
-        // In a real implementation, we would use canvas to combine the image and overlay
-        // and then trigger a download. This is a simplified version.
-        const link = document.createElement('a');
-        link.href = previewImage.src;
-        link.download = `icon-with-overlay.${format}`;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
+        // Create canvas to combine image and overlay
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+        
+        img.onload = function() {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+            
+            // Draw overlay if exists
+            if (currentOverlay) {
+                const overlayColor = currentOverlay.classList.contains('red') ? 'rgba(239, 68, 68, 0.7)' :
+                                    currentOverlay.classList.contains('blue') ? 'rgba(59, 130, 246, 0.7)' :
+                                    currentOverlay.classList.contains('green') ? 'rgba(16, 185, 129, 0.7)' :
+                                    'rgba(234, 179, 8, 0.7)';
+                
+                ctx.fillStyle = overlayColor;
+                
+                // Draw based on overlay type
+                if (currentOverlay.classList.contains('banner')) {
+                    const height = canvas.height * 0.1;
+                    ctx.fillRect(0, 0, canvas.width, height);
+                } else if (currentOverlay.classList.contains('badge')) {
+                    const size = canvas.width * 0.2;
+                    ctx.beginPath();
+                    ctx.arc(canvas.width - size/2, size/2, size/2, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+            
+            // Trigger download
+            const link = document.createElement('a');
+            link.download = `icon-with-overlay.${format}`;
+            link.href = canvas.toDataURL(`image/${format}`);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        };
+        
+        img.src = currentFile;
     }
 });

style.css

@@ -37,10 +37,17 @@ body {
     border-color: #3b82f6;
     background-color: #eff6ff;
 }
-
 /* Responsive adjustments */
 @media (max-width: 640px) {
     .grid-cols-2 {
         grid-template-columns: 1fr;
     }
-}
+}
+
+/* Overlay styles */
+.overlay {
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+}