Bug: Correctly serve Image MIME types from local storage

[TusharW4ni]

Context / Problem

In server/api/users/[id]/profile.get.ts, uploaded profile images are being served with a hardcoded application/octet-stream Content-Type. This is because file extensions aren't saved during the upload process in upload.post.ts. While some browsers guess the image type and render it, strict browser security settings might block it or force a file download instead of rendering it in an <img> tag.

Proposed Solution

Determine and set the correct MIME type when serving the image, or save the file extension during upload.

Implementation Details

Option A (Recommended): Use a lightweight library like file-type to detect the magic bytes of the file when serving it.

import { fileTypeFromFile } from 'file-type';

// ... inside the handler
const meta = await fileTypeFromFile(filePath);
setHeader(event, 'Content-Type', meta?.mime || 'application/octet-stream');

Option B: Save the file extension into the database during the upload.post.ts process.

Acceptance Criteria

• Profile pictures are served with the correct Content-Type header (e.g., image/jpeg, image/png).
• Images render reliably across different browsers without prompting a download.