Allow to attach files with drag& drop also allow this types and more: .js ; .ts ;.jsx ;.tsx; .sql etc

index.html

@@ -86,7 +86,20 @@
                         <label class="block text-sm font-medium text-gray-700 mb-1">Deployment Hook URL</label>
                         <input type="text" id="hookUrl" placeholder="https://api.supabase.com/v1/hooks/..." class="w-full px-3 py-2 border border-gray-300 rounded-md">
                     </div>
-                    <button id="saveConfig" class="mt-6 bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg">
+                    
+                    <div id="dropZone" class="mt-4 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-gray-50 hover:bg-gray-100 transition-colors">
+                        <div class="flex flex-col items-center justify-center">
+                            <i data-feather="upload" class="w-12 h-12 text-gray-400 mb-2"></i>
+                            <p class="text-gray-600">Drag & drop files here or click to browse</p>
+                            <input type="file" id="fileInput" class="hidden" multiple>
+                            <p class="text-xs text-gray-500 mt-2">Supported: .js, .ts, .jsx, .tsx, .sql, .json</p>
+                        </div>
+                    </div>
+                    <div id="fileList" class="mt-2 hidden">
+                        <h3 class="text-sm font-medium text-gray-700">Selected Files:</h3>
+                        <ul id="fileItems" class="text-sm text-gray-600"></ul>
+                    </div>
+<button id="saveConfig" class="mt-6 bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg">
                         Save Configuration
                     </button>
                 </div>

script.js

@@ -46,6 +46,97 @@ document.addEventListener('DOMContentLoaded', () => {
             simulateLoadBranches(e.target.value);
         }
     });
+    // File upload handling
+    const dropZone = document.getElementById('dropZone');
+    const fileInput = document.getElementById('fileInput');
+    const fileList = document.getElementById('fileList');
+    const fileItems = document.getElementById('fileItems');
+    let uploadedFiles = [];
+
+    // Handle drag and drop
+    dropZone.addEventListener('click', () => fileInput.click());
+    
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, unhighlight, false);
+    });
+
+    function highlight() {
+        dropZone.classList.add('border-indigo-500', 'bg-indigo-50');
+    }
+
+    function unhighlight() {
+        dropZone.classList.remove('border-indigo-500', 'bg-indigo-50');
+    }
+
+    dropZone.addEventListener('drop', handleDrop, false);
+    fileInput.addEventListener('change', handleFiles, false);
+
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        handleFiles({ target: { files } });
+    }
+
+    function handleFiles(e) {
+        const files = e.target.files;
+        const allowedTypes = ['.js', '.ts', '.jsx', '.tsx', '.sql', '.json'];
+        
+        Array.from(files).forEach(file => {
+            const ext = '.' + file.name.split('.').pop().toLowerCase();
+            if (!allowedTypes.includes(ext)) {
+                alert(`File type ${ext} is not allowed`);
+                return;
+            }
+            
+            uploadedFiles.push(file);
+            updateFileList();
+        });
+    }
+
+    function updateFileList() {
+        if (uploadedFiles.length === 0) {
+            fileList.classList.add('hidden');
+            return;
+        }
+        
+        fileItems.innerHTML = '';
+        uploadedFiles.forEach((file, index) => {
+            const li = document.createElement('li');
+            li.className = 'flex items-center justify-between py-1';
+            li.innerHTML = `
+                <span>${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
+                <button data-index="${index}" class="text-red-500 hover:text-red-700">
+                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                </button>
+            `;
+            fileItems.appendChild(li);
+        });
+        
+        fileList.classList.remove('hidden');
+        feather.replace();
+        
+        // Add event listeners to delete buttons
+        document.querySelectorAll('#fileItems button').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const index = e.target.closest('button').dataset.index;
+                uploadedFiles.splice(index, 1);
+                updateFileList();
+            });
+        });
+    }
 
     // Save configuration
     document.getElementById('saveConfig').addEventListener('click', () => {
@@ -54,8 +145,21 @@ document.addEventListener('DOMContentLoaded', () => {
         const hookUrl = document.getElementById('hookUrl').value;
         
         if (repo && branch && hookUrl) {
-            alert('Configuration saved successfully!');
-            // In a real app, this would save to your backend or Supabase
+            if (uploadedFiles.length > 0) {
+                // Upload files along with config
+                const formData = new FormData();
+                uploadedFiles.forEach(file => {
+                    formData.append('files', file);
+                });
+                formData.append('repo', repo);
+                formData.append('branch', branch);
+                formData.append('hookUrl', hookUrl);
+                
+                // In a real app, send to backend
+                alert('Configuration and files saved successfully!');
+            } else {
+                alert('Configuration saved successfully!');
+            }
         } else {
             alert('Please complete all configuration fields');
         }

style.css

@@ -26,7 +26,24 @@ input:focus, select:focus {
     from { opacity: 0; transform: translateY(5px); }
     to { opacity: 1; transform: translateY(0); }
 }
-
 .status-message {
     animation: fadeIn 0.3s ease-out;
-}
+}
+
+/* Drag and drop styles */
+#dropZone {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+#dropZone.border-indigo-500 {
+    border-color: #6366f1;
+}
+
+#fileItems button {
+    transition: color 0.2s ease;
+}
+
+#fileItems button:hover {
+    transform: scale(1.1);
+}