Added Image metadata and made spice lvl editable

Also added db support

static/js/image_upload.js

@@ -32,7 +32,7 @@ uploadForm.on("submit", function(e) {
     formData.append("image", currentFile);
 
     $.ajax({
-        url: "/upload",
+        url: "/api/upload",
         type: "POST",
         data: formData,
         processData: false,

static/js/images.js

@@ -1,7 +1,6 @@
 let galleryTable = $("#imagesGallery")
 let refreshButton = $("#refresh-gallery")
-
-let filesList = []
+let saveButton = $("#save-gallery")
 
 let fileMetaData = []
 
@@ -10,44 +9,51 @@ async function fetchImages() {
         url: '/files',
         type: 'GET',
         success: function(response) {
-            filesList = response;
-            console.log(filesList);
+            fileMetaData = response;
+            console.log(fileMetaData);
         },
         error: function() {
             alert('Error fetching images.');
         }
     });
     
-    filesList.ImageNames.forEach((filePath, i) => {
+    fileMetaData.forEach((file, i) => {
         let newRow = $(`
                 <tr>
                     <td>`+ i +`</td>
                     <td>
-                        <img src="` + filePath + `" class="gallery-image" />
+                        <img src="` + file.path + `" class="gallery-image" />
                     </td>
                         <td class="spice-slider-td">
-                            <output id="spice-output-` + i + `">0</output>
-                            <input type="range" min="0" max="10" value="` + 0 + `" class="spice-slider" id="spice-slider-` + i + `" />
+                            <output id="spice-output-` + file.id + `">` + file.spice_level +`</output>
+                            <input type="range" min="0" max="10" value="` + file.spice_level + `" class="spice-slider" id="spice-slider-` + file.id + `" />
                         </td>
                     </tr>
             `);
         galleryTable.append(newRow);
-
-        fileMetaData.push({
-            "id": i,
-            "spice_level": 0,
-            "path": filePath
-        });
     });
     fileMetaData.forEach(file => {
         $("#spice-slider-" + file.id).on("input", function() {
-            file.spice_level = this.value;
+            file.spice_level = Number(this.value);
             $("#spice-output-" + file.id).text(this.value);
             console.log(fileMetaData);
         })
     });
 }
-
+saveButton.on("click", function() {
+    $.ajax({
+        url: '/api/save-metadata',
+        type: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify(fileMetaData),
+        success: function() {
+            alert('Metadata saved successfully.');
+        },
+        error: function() {
+            alert('Error saving metadata.');
+        }
+    });
+})
 refreshButton.on("click", function() {
     galleryTable.empty();
     fetchImages();