CSV Header validation

Added further checking to upload CSV page.

Instead of just accepting a file if the extension is CSV, it now checks the headers of the given CSV file and only accepts if the format is correct, otherwise a valid error message is displayed to the user.

src/upload_csv.html

@@ -83,6 +83,7 @@
     </body>
     <script>
         $('#csv_file_upload').change( function(){
+            const csv_file = document.getElementById('csv_file_upload').files[0]
     
             var res=$('#csv_file_upload').val();
             var arr = res.split("\\");
@@ -119,8 +120,11 @@
                 $( "#csv_upload_btn" ).hide();
                 $( "#csv_disabled_btn" ).show();
             } 
-            else // File is valid
+            else // File is valid CSV file
             {
+                validateCSVHeaders(csv_file).then((result) => {
+                    // Headers in CSV file are valid
+
                     // Hide all icons and show valid icon
                     $( ".csv_filetype" ).hide();
                     $( ".csv_x" ).hide();
@@ -132,7 +136,60 @@
                     // Hide disabled button and show upload button
                     $( "#csv_upload_btn" ).show();
                     $( "#csv_disabled_btn" ).hide();
+                })
+                .catch((error) => {
+                    // Headers in CSV are NOT valid
+
+                    console.error(error);
+
+                    // Hide all icons and show invalid icon
+                    $( ".csv_filetype" ).hide();
+                    $( ".csv_check" ).hide();
+                    $( ".csv_x" ).show();
+                
+                    // Display error message
+                    $('#csv_filename').html("File "+filename+" is formatted incorrectly.");
+                    
+                    // Hide upload button and display disabled button
+                    $( "#csv_upload_btn" ).hide();
+                    $( "#csv_disabled_btn" ).show();
+                });
             }
         });
+
+        // Define the expected headers
+        const expectedHeaders = ['encounterId', 'end_tidal_co2', 'feed_vol', 'feed_vol_adm',
+                                 'fio2', 'fio2_ratio', 'insp_time', 'oxygen_flow_rate',
+                                  'peep', 'pip', 'resp_rate', 'sip', 'tidal_vol', 
+                                  'tidal_vol_actual', 'tidal_vol_kg', 'tidal_vol_spon', 
+                                  'bmi', 'referral'];
+
+        function validateCSVHeaders(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader(); // Create a new FileReader object
+                reader.readAsText(file); // Read the file as text
+
+                reader.onload = (event) => {
+                    const csv = event.target.result; // Get the CSV data
+                    const headers = csv.split('\n')[0].split(','); // Get headers by splitting the first line of CSV file
+                    
+                    if (headers.length !== expectedHeaders.length) {
+                        reject(new Error('The number of headers in the file does not match the expected number.'));
+                    }
+                    
+                    for (let i = 0; i < expectedHeaders.length; i++) {
+                        if (headers[i] !== expectedHeaders[i]) {
+                            reject(new Error(`The header at position ${i+1} does not match the expected header.`));
+                        }
+                    }
+
+                    resolve(true); // If all headers match, resolve the promise with true
+                };
+
+                reader.onerror = (error) => {
+                    reject(error); // If there's an error reading the file, reject the promise with the error
+                };
+            });
+        }
     </script>
 </html>
\ No newline at end of file