fix(files): derive file name from MIME type for uploads

Author: Yuval

03-Client/src/app/services/api/files.ts

@@ -15,6 +15,26 @@ interface UploadResult {
   data: { url: string };
 }
 
+const MIME_TO_EXT: Record<string, string> = {
+  "image/jpeg": ".jpg",
+  "image/jpg": ".jpg",
+  "image/png": ".png",
+  "image/webp": ".webp",
+};
+
+// browser-image-compression and mobile capture sometimes produce a File with
+// no name or no extension. The server's extension check rejects those even
+// when the bytes are a valid JPEG, so we derive a name from the MIME type.
+function ensureFileName(file: File): string {
+  const name = file.name ?? "";
+  const hasAllowedExt = /\.(jpe?g|png|webp)$/i.test(name);
+  if (hasAllowedExt) return name;
+
+  const ext = MIME_TO_EXT[file.type?.toLowerCase() ?? ""] ?? ".jpg";
+  const base = name.replace(/\.[^.]+$/, "") || `upload-${Date.now()}`;
+  return `${base}${ext}`;
+}
+
 /**
  * Upload an image file to the backend.
  * Returns the URL of the stored file.
@@ -23,7 +43,7 @@ export async function uploadImage(file: File): Promise<string> {
   const token = localStorage.getItem("accessToken");
 
   const formData = new FormData();
-  formData.append("file", file);
+  formData.append("file", file, ensureFileName(file));
 
   const res = await fetch(`${API_BASE}/files/upload`, {
     method: "POST",