I can't even upload file when click at new contract now

index.html

@@ -27,8 +27,8 @@
             <!-- File cards will be added here dynamically -->
             
             <!-- Add new file card -->
-            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" id="add-file-card">
-                <div class="p-8 flex flex-col items-center justify-center h-full">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer" id="add-file-card" onclick="document.getElementById('upload-modal').classList.remove('hidden')">
+<div class="p-8 flex flex-col items-center justify-center h-full">
                     <i data-feather="plus" class="w-16 h-16 text-blue-500 mb-4"></i>
                     <h3 class="text-xl font-semibold text-gray-800">Add New Contract</h3>
                 </div>

script.js

@@ -25,18 +25,15 @@ document.addEventListener('DOMContentLoaded', function() {
     const uploadModal = document.getElementById('upload-modal');
     const closeModal = document.getElementById('close-modal');
     const uploadForm = document.getElementById('upload-form');
-    
     // Open modal when add file card is clicked
-    addFileCard.addEventListener('click', () => {
-        uploadModal.classList.remove('hidden');
+    document.getElementById('add-file-card').addEventListener('click', () => {
+        document.getElementById('upload-modal').classList.remove('hidden');
     });
-    
     // Close modal
-    closeModal.addEventListener('click', () => {
-        uploadModal.classList.add('hidden');
+    document.getElementById('close-modal').addEventListener('click', () => {
+        document.getElementById('upload-modal').classList.add('hidden');
     });
-    
-    // Handle file upload
+// Handle file upload
     uploadForm.addEventListener('submit', async (e) => {
         e.preventDefault();