Rewrote js in jquery and started working on showing images and potentialy addin metadata to images (Spicy lvl, etc)

static/js/admin.js

@@ -1,71 +1,11 @@
-const imageInput = document.getElementById('imageInput');
-const preview = document.getElementById('preview');
-        
-let currentFile = null;
+let tab_buttons = $( ".tab-button" )
+let tab_containers = $( ".tab-container" )
 
-        
-
-imageInput.addEventListener('change', function() {
-    currentFile = this.files[0];
-    if (currentFile) {
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            preview.src = e.target.result;
-            preview.style.display = 'block';
-        }
-        reader.readAsDataURL(currentFile);
-    } else {
-        preview.style.display = 'none';
-    }
-});
-
-document.getElementById('imageForm').addEventListener('submit', function(e) {
-    e.preventDefault();
-
-    // Add your upload logic here
-    const formData = new FormData();
-    formData.append('image', currentFile);
-    if (!currentFile) {
-        alert('Please select an image to upload.');
-        return;
-    }
-    fetch('/upload', {
-        method: 'POST',
-        body: formData
-    }).then(response => response.text())
-    .then(data => {
-        console.log(data);
-        alert('Image uploaded successfully!');
-          window.location.reload();
-      })
-      .catch(error => {
-          console.error('Error:', error);
-          alert('Error uploading image.');
-   });
-});
-
-function openTab(evt, tabNumber) {
-  // Declare all variables
-  var i, tabcontent, tablinks;
-
-  // Get all elements with class="tabcontent" and hide them
-  tabcontent = document.getElementsByClassName("tab-container");
-  for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = "none";
-  }
-
-  // Get all elements with class="tablinks" and remove the class "active"
-  tablinks = document.getElementsByClassName("tab-button");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
-
-  // Show the current tab, and add an "active" class to the button that opened the tab
-  console.log("tab-"+tabNumber);
-  let currentTab = document.getElementById('tab-'+(tabNumber))
-  if (currentTab) {
-    currentTab.style.display = "block";
-  } else throw new Error("Tab not found: " + tabNumber);
-  currentTab.style.display = "block";
-  evt.currentTarget.className += " active";
-}
+tab_buttons.on( "click", function() {
+    let id = $( this ).attr( "id" )
+    tab_buttons.removeClass( "active" )
+    tab_containers.removeClass( "active" )
+    $( this ).addClass( "active" )
+    console.log( id )
+    $( "#tab-" + id ).addClass( "active" )
+})

static/js/image_upload.js

@@ -0,0 +1,47 @@
+let imageInput = $("#imageInput")
+let imagePreview = $("#preview")
+
+let uploadForm = $("#imageForm")
+
+let currentFile = null;
+
+imageInput.on("change", function() {
+    currentFile = this.files[0];
+    if (currentFile) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            preview.src = e.target.result;
+            preview.style.display = 'block';
+        }
+        reader.readAsDataURL(currentFile);
+    } else {
+        preview.style.display = 'none';
+    }
+})
+
+uploadForm.on("submit", function(e) {
+    e.preventDefault();
+    
+    if (!currentFile) {
+        alert("Please select a file first.");
+        return;
+    }
+
+    let formData = new FormData();
+    formData.append("image", currentFile);
+
+    $.ajax({
+        url: "/upload",
+        type: "POST",
+        data: formData,
+        success: function(response) {
+            alert("Image uploaded successfully!");
+            imageInput.val("");
+            preview.style.display = 'none';
+            currentFile = null;
+        },
+        error: function(xhr, status, error) {
+            alert("Error uploading image: " + xhr.responseText);
+        }
+    });
+})

static/js/images.js

@@ -0,0 +1,16 @@
+let filesList = []
+
+$( document ).ready(function() {        
+    $.ajax({
+        url: '/files',
+        type: 'GET',
+        success: function(response) {
+            filesList = response;
+            console.log(filesList);
+        },
+        error: function() {
+            alert('Error fetching images.');
+        }
+    
+    });
+});