não está dando para selecionar os arquivos

index.html

@@ -56,16 +56,19 @@
             <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                 <div class="p-8">
                     <div class="file-upload rounded-lg p-12 text-center cursor-pointer">
-                        <div class="flex flex-col items-center justify-center space-y-4">
-                            <i data-feather="upload" class="w-12 h-12 text-blue-500"></i>
-                            <h3 class="text-xl font-semibold text-gray-800">Arraste e solte PDFs SEI aqui</h3>
-                            <p class="text-gray-500">ou clique para selecionar arquivos</p>
-                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition">
-                                Selecionar Arquivos
-                            </button>
-                        </div>
+                        <form id="uploadForm" enctype="multipart/form-data">
+                            <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx" multiple>
+                            <label for="fileInput" class="flex flex-col items-center justify-center space-y-4 cursor-pointer">
+                                <i data-feather="upload" class="w-12 h-12 text-blue-500"></i>
+                                <h3 class="text-xl font-semibold text-gray-800">Arraste e solte PDFs SEI aqui</h3>
+                                <p class="text-gray-500">ou clique para selecionar arquivos</p>
+                                <span class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition">
+                                    Selecionar Arquivos
+                                </span>
+                            </label>
+                        </form>
                     </div>
-                </div>
+</div>
                 <div class="bg-gray-50 px-8 py-4 border-t border-gray-200">
                     <div class="flex items-center justify-between">
                         <span class="text-sm text-gray-500">Formatos suportados: PDF, DOCX</span>
@@ -244,7 +247,7 @@
     <script>
         // Initialize Vanta.js background
         VANTA.NET({
-            el: "#vanta-bg",
+el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,
             gyroControls: false,
@@ -258,11 +261,45 @@
             maxDistance: 22.00,
             spacing: 18.00
         });
-
-        // Initialize Feather Icons
+        // Initialize Feather Icons and file upload handling
         document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
+            
+            const fileInput = document.getElementById('fileInput');
+            
+            fileInput.addEventListener('change', function(e) {
+                if (e.target.files.length > 0) {
+                    const files = Array.from(e.target.files);
+                    console.log('Files selected:', files);
+                    // Here you would typically handle the file upload
+                    // Example: uploadFiles(files);
+                    alert(`${files.length} arquivo(s) selecionado(s)!`);
+                }
+            });
+
+            // Drag and drop support
+            const uploadArea = document.querySelector('.file-upload');
+            
+            uploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                uploadArea.classList.add('bg-blue-50');
+            });
+
+            uploadArea.addEventListener('dragleave', () => {
+                uploadArea.classList.remove('bg-blue-50');
+            });
+
+            uploadArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                uploadArea.classList.remove('bg-blue-50');
+                
+                if (e.dataTransfer.files.length) {
+                    fileInput.files = e.dataTransfer.files;
+                    const event = new Event('change');
+                    fileInput.dispatchEvent(event);
+                }
+            });
         });
-    </script>
+</script>
 </body>
 </html>