Added CSV upload verification

Only .csv files are allowed to be uploaded

TO DO:
Add verification for CSV file structure (i.e. Correct headers used)

src/upload_csv.html

@@ -8,7 +8,6 @@
         <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
   
         <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
-        <script type="text/javascript" src="data.js"></script>
         <link rel="stylesheet" href="index.css" />
         <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
         <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
@@ -60,7 +59,7 @@
                                     <div class="btn-container-row row">
                                         <div class="col" style="padding-left: 0px; padding-right: 0px;">
                                             <div class="btn-container">
-                                                <i class="bi-filetype-csv" style="font-size: 2rem; color: rgb(0, 0, 0);"></i>
+                                                <i class="csv_filetype bi-filetype-csv" style="font-size: 2rem; color: rgb(0, 0, 0);"></i>
                                                 <i class="csv_check bi-check-circle" style="font-size: 2rem; color: rgb(0, 0, 0);"></i>
                                                 <i class="csv_x bi-x-circle" style="font-size: 2rem; color: rgb(0, 0, 0);"></i>
     
@@ -85,4 +84,58 @@
             </div>
         </div>
     </body>
+    <script>
+        $('#csv_file_upload').change( function(){
+    
+            var res=$('#csv_file_upload').val();
+            var arr = res.split("\\");
+            var filename=arr.slice(-1)[0];
+            filextension=filename.split(".");
+            file_ext="."+filextension.slice(-1)[0];
+            valid=[".csv"];
+            
+            // If filename is empty (uploaded file is removed, reset to normal state)
+            if (!filename){
+                // Hide all icons and show CSV file icon
+                $( ".csv_filetype" ).show();
+                $( ".csv_check" ).hide();
+                $( ".csv_x" ).hide();
+                
+                // Display normal message
+                $('#csv_filename').html("Only valid CSV's allowed.");
+                
+                // Hide upload button and display disabled button
+                $( "#csv_upload_btn" ).hide();
+                $( "#csv_disabled_btn" ).show();
+            }
+            // If file is not valid:
+            else if (valid.indexOf(file_ext.toLowerCase())==-1){
+                // 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 not a valid CSV.");
+                
+                // Hide upload button and display disabled button
+                $( "#csv_upload_btn" ).hide();
+                $( "#csv_disabled_btn" ).show();
+            } 
+            else // File is valid
+            {
+                // Hide all icons and show valid icon
+                $( ".csv_filetype" ).hide();
+                $( ".csv_x" ).hide();
+                $( ".csv_check" ).show();
+            
+                // Display valid filename
+                $('#csv_filename').html(filename);
+            
+                // Hide disabled button and show upload button
+                $( "#csv_upload_btn" ).show();
+                $( "#csv_disabled_btn" ).hide();
+            }
+        });
+    </script>
 </html>
\ No newline at end of file