more fixes

fileManager.js

@@ -158,13 +158,13 @@ export function renderFileTable(folder) {
           <th data-column="modified" class="hide-small" style="cursor:pointer; white-space: nowrap;">
             Date Modified ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}
           </th>
-          <th data-column="uploaded" class="hide-small" style="cursor:pointer; white-space: nowrap;">
+          <th data-column="uploaded" class="hide-small hide-medium" style="cursor:pointer; white-space: nowrap;">
             Upload Date ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}
           </th>
           <th data-column="size" class="hide-small" style="cursor:pointer; white-space: nowrap;">
             File Size ${sortOrder.column === "size" ? (sortOrder.ascending ? "▲" : "▼") : ""}
           </th>
-          <th data-column="uploader" class="hide-small" style="cursor:pointer; white-space: nowrap;">
+          <th data-column="uploader" class="hide-small hide-medium" style="cursor:pointer; white-space: nowrap;">
             Uploader ${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}
           </th>
           <th>Actions</th>
@@ -193,9 +193,9 @@ export function renderFileTable(folder) {
         </td>
         <td>${safeFileName}</td>
         <td class="hide-small" style="white-space: nowrap;">${safeModified}</td>
-        <td class="hide-small" style="white-space: nowrap;">${safeUploaded}</td>
+        <td class="hide-small hide-medium" style="white-space: nowrap;">${safeUploaded}</td>
         <td class="hide-small" style="white-space: nowrap;">${safeSize}</td>
-        <td class="hide-small" style="white-space: nowrap;">${safeUploader}</td>
+        <td class="hide-small hide-medium" style="white-space: nowrap;">${safeUploader}</td>
         <td>
           <div class="button-wrap">
             <a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>

networkUtils.js

@@ -1,22 +1,32 @@
 // networkUtils.js
 export function sendRequest(url, method = "GET", data = null) {
-    console.log("Sending request to:", url, "with method:", method);
-    const options = { method, headers: { "Content-Type": "application/json" } };
-    if (data) {
-      options.body = JSON.stringify(data);
-    }
-    return fetch(url, options)
-      .then(response => {
-        console.log("Response status:", response.status);
-        if (!response.ok) {
-          return response.text().then(text => {
-            throw new Error(`HTTP error ${response.status}: ${text}`);
-          });
-        }
-        return response.json().catch(() => {
-          console.warn("Response is not JSON, returning as text");
-          return response.text();
-        });
-      });
+  console.log("Sending request to:", url, "with method:", method);
+  const options = {
+    method,
+    credentials: 'include', // include cookies in requests
+    headers: {}
+  };
+
+  // If data is provided and is not FormData, assume JSON.
+  if (data && !(data instanceof FormData)) {
+    options.headers["Content-Type"] = "application/json";
+    options.body = JSON.stringify(data);
+  } else if (data instanceof FormData) {
+    // For FormData, don't set the Content-Type header; the browser will handle it.
+    options.body = data;
   }
-  
+
+  return fetch(url, options)
+    .then(response => {
+      console.log("Response status:", response.status);
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error(`HTTP error ${response.status}: ${text}`);
+        });
+      }
+      return response.json().catch(() => {
+        console.warn("Response is not JSON, returning as text");
+        return response.text();
+      });
+    });
+}

styles.css

@@ -208,6 +208,24 @@ header {
   align-items: center;
 }
 
+#customChooseBtn {
+  background-color: #9E9E9E;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 18px;
+  font-size: 16px;
+  cursor: pointer;
+  white-space: nowrap; /* Prevent text wrapping */
+}
+
+/* For medium screens, reduce font size and padding */
+@media (max-width: 768px) {
+  #customChooseBtn {
+    font-size: 14px;
+    padding: 6px 14px;
+  }
+}
 /* ===========================================================
    UPLOAD PROGRESS STYLES
    =========================================================== */
@@ -286,6 +304,11 @@ header {
     display: none;
   }
 }
+@media (min-width: 768px) and (max-width: 991px) {
+  .hide-medium {
+    display: none !important;
+  }
+}
 
 /* ===========================================================
    BUTTON STYLES (MATERIAL THEME)

upload.js

@@ -1,8 +1,7 @@
 // upload.js
 
 import { loadFileList, displayFilePreview, initFileActions } from './fileManager.js';
-import { showToast } from './domUtils.js';
-
+import { showToast, escapeHTML } from './domUtils.js';
 
 export function initUpload() {
   const fileInput = document.getElementById("file");
@@ -18,8 +17,8 @@ export function initUpload() {
           Drop files here or click 'Choose files'
         </div>
         <div id="uploadFileRow" style="display:flex; align-items:center; justify-content:center;">
-          <button id="customChooseBtn" type="button" style="background-color:#9E9E9E; color:#fff; border:none; border-radius:4px; padding:8px 18px; font-size:16px; cursor:pointer;">
-            Choose files
+          <button id="customChooseBtn" type="button">
+           Choose files
           </button>
           <div id="fileInfoContainer" style="margin-left:10px; font-size:16px; display:flex; align-items:center;">
             <span id="fileInfoDefault">No files selected</span>
@@ -27,12 +26,12 @@ export function initUpload() {
         </div>
       `;
       // Wire up the custom button.
-     /* const customChooseBtn = document.getElementById("customChooseBtn");
+      /* const customChooseBtn = document.getElementById("customChooseBtn");
       if (customChooseBtn) {
         customChooseBtn.addEventListener("click", function () {
           fileInput.click();
         });
-      }*/
+      } */
     }
   }
 
@@ -82,7 +81,7 @@ export function initUpload() {
           if (files.length === 1) {
             fileInfoContainer.innerHTML = `
               <div id="filePreviewContainer" style="display:inline-block; vertical-align:middle;"></div>
-              <span id="fileNameDisplay" style="vertical-align:middle; margin-left:5px;">${files[0].name}</span>
+              <span id="fileNameDisplay" style="vertical-align:middle; margin-left:5px;">${escapeHTML(files[0].name)}</span>
             `;
           } else {
             fileInfoContainer.innerHTML = `
@@ -121,6 +120,7 @@ export function initUpload() {
           displayFilePreview(file, preview);
           
           const nameDiv = document.createElement("div");
+          // Using textContent here is safe, so no need to escape
           nameDiv.textContent = file.name;
           nameDiv.style.flexGrow = "1";
           nameDiv.style.marginLeft = "5px";