fix uploads

static/index.html

@@ -270,6 +270,16 @@
     </div>
   </div>
 
+  <div id="upload-limit-modal" class="modal-container hidden">
+    <div class="modal">
+      <h2>Upload Too Large</h2>
+      <p id="upload-limit-message" class="modal-copy">Uploads are limited to 50 MB per file.</p>
+      <div class="modal-footer">
+        <button type="button" class="submit-btn" id="upload-limit-ok">OK</button>
+      </div>
+    </div>
+  </div>
+
   <script type="module" src="/static/app.js?v=20260227-shared-core-1"></script>
 </body>
 

static/shared/app-core.js

@@ -230,6 +230,9 @@ const el = {
   soundFile: document.getElementById('sound-file'),
   soundModalCancel: document.getElementById('sound-modal-cancel'),
   soundSubmitBtn: document.getElementById('sound-submit-btn'),
+  uploadLimitModal: document.getElementById('upload-limit-modal'),
+  uploadLimitMessage: document.getElementById('upload-limit-message'),
+  uploadLimitOk: document.getElementById('upload-limit-ok'),
 
   // Mobile
   mobileMenuBtn: document.getElementById("mobile-menu-btn"),
@@ -357,6 +360,8 @@ function formatBytes(size) {
   return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
 }
 
+const MAX_MEDIA_UPLOAD_BYTES = 50 * 1024 * 1024;
+
 function renderAttachments(attachments = []) {
   if (!attachments.length) return "";
 
@@ -382,6 +387,16 @@ function renderAttachments(attachments = []) {
   }).join("");
 }
 
+function showMediaUploadLimitError(file) {
+  const selectedSize = formatBytes(file?.size || 0);
+  if (el.uploadLimitModal && el.uploadLimitMessage) {
+    el.uploadLimitMessage.textContent = `Uploads are limited to 50 MB per file. Selected file size: ${selectedSize}.`;
+    el.uploadLimitModal.classList.remove("hidden");
+    return;
+  }
+  alert(`Uploads are limited to 50 MB per file.\nSelected file size: ${selectedSize}.`);
+}
+
 function formatDate(isoString) {
   const d = new Date(isoString);
   const now = new Date();
@@ -1967,6 +1982,17 @@ async function init() {
     }
   };
 
+  if (el.uploadLimitOk && el.uploadLimitModal) {
+    el.uploadLimitOk.onclick = () => {
+      el.uploadLimitModal.classList.add("hidden");
+    };
+    el.uploadLimitModal.onclick = (e) => {
+      if (e.target === el.uploadLimitModal) {
+        el.uploadLimitModal.classList.add("hidden");
+      }
+    };
+  }
+
   // 5. GIF Picker
   const TENOR_API_KEY = "exTiFGKJ0CzESIHzVQWy3pRO8I1MAdpRomg95DBSu2sg6e7YcHgThMI4giGAx8D0";
   const TENOR_CLIENT_KEY = "pavel-discord";
@@ -2039,6 +2065,10 @@ async function init() {
   async function uploadMediaFile(file) {
     const token = storageGet("chattz_token");
     if (!token) throw new Error("You need to log in again.");
+    if (file.size > MAX_MEDIA_UPLOAD_BYTES) {
+      showMediaUploadLimitError(file);
+      return;
+    }
 
     const path = state.selectedTextChannelId
       ? `/channels/${state.selectedTextChannelId}/attachments`
@@ -2047,9 +2077,6 @@ async function init() {
         : null;
     if (!path) throw new Error("Select a chat first.");
 
-    const formData = new FormData();
-    formData.append("file", file);
-
     el.mediaUploadBtn.disabled = true;
     el.mediaUploadBtn.title = "Uploading...";
 
@@ -2059,8 +2086,10 @@ async function init() {
         method: "POST",
         headers: {
           Authorization: `Bearer ${token}`,
+          "Content-Type": file.type || "application/octet-stream",
+          "X-File-Name": file.name,
         },
-        body: formData,
+        body: file,
       });
 
       if (!response.ok) {

static/styles.css

@@ -1478,6 +1478,13 @@ select {
   letter-spacing: -0.3px;
 }
 
+.modal-copy {
+  margin: 0;
+  text-align: center;
+  color: var(--text-normal);
+  line-height: 1.5;
+}
+
 .form-item {
   margin-bottom: 20px;
 }