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,10 +1,21 @@
 // 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" } };
+  const options = {
-    if (data) {
+    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);
@@ -19,4 +30,3 @@ export function sendRequest(url, method = "GET", data = null) {
       });
     });
 }
-  

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,7 +17,7 @@ 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;">
+          <button id="customChooseBtn" type="button">
            Choose files
           </button>
           <div id="fileInfoContainer" style="margin-left:10px; font-size:16px; display:flex; align-items:center;">
@@ -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";