Fix Upload function 1

index.html

@@ -72,7 +72,7 @@ <h2 class="text-2xl font-bold mb-4">Upload CSV Files</h2>
                     </div>
                     <button type="submit" class="btn btn-black">
                         <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                         </svg>
                         Upload and Preview
                     </button>

static/js/script.js

@@ -6,6 +6,28 @@ document.addEventListener('DOMContentLoaded', () => {
     const downloadSection = document.getElementById('downloadSection');
     const generateBtn = document.getElementById('generateBtn');
 
+    const dataFileInput = document.getElementById('dataFile');
+    const templateFileInput = document.getElementById('templateFile');
+    const dataFileName = document.getElementById('dataFileName');
+    const templateFileName = document.getElementById('templateFileName');
+
+    // Add event listeners for file input changes
+    dataFileInput.addEventListener('change', (e) => {
+        updateFileName(e.target, dataFileName);
+    });
+
+    templateFileInput.addEventListener('change', (e) => {
+        updateFileName(e.target, templateFileName);
+    });
+
+    function updateFileName(input, fileNameElement) {
+        if (input.files && input.files[0]) {
+            fileNameElement.textContent = input.files[0].name;
+        } else {
+            fileNameElement.textContent = 'No file chosen';
+        }
+    }
+
     let dataContent = '';
     let templateHeaders = [];
     let dataHeaders = [];