Have you ever uploaded a file and the browser didn’t open it correctly — maybe it downloaded instead of showing up on the screen?
That usually happens because of something called a MIME type.

🧠 What Is a MIME Type?

A MIME type (short for Multipurpose Internet Mail Extensions) tells the browser what kind of file it’s dealing with.
For example:

File TypeMIME TypeExtension
HTML pagetext/html.html
CSS filetext/css.css
JavaScript fileapplication/javascript.js
JPEG imageimage/jpeg.jpg, .jpeg
PDF documentapplication/pdf.pdf
Word documentapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.docx

When your web server sends a file, it includes a header like this:

Content-Type: text/html

That tells the browser: “This is an HTML document — please render it.”

⚠️ Why It Matters

If the MIME type doesn’t match the actual file content, the browser might:

  • Refuse to load it (for security reasons)
  • Display it as plain text
  • Or download it instead of opening it

Example:
If you serve a .js file with the MIME type text/plain, most browsers will block it because they expect application/javascript.

🧩 Common Mistakes

1. Wrong MIME for Office files

  • Word (.docx) → application/vnd.openxmlformats-officedocument.wordprocessingml.document
  • Excel (.xlsx) → application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

2. Missing configuration on servers (like Nginx or S3)

Make sure your server or S3 bucket correctly maps file extensions to MIME types.

🔍 How to Check a MIME Type

On macOS / Linux:

file --mime-type filename.ext

In the Browser (DevTools):

  1. Open the Network tab
  2. Reload the page
  3. Click on a file → check the Content-Type header

📝 Summary

  • File extensions (.jpg, .pdf, .css) are just hints.
  • MIME types tell browsers how to handle the file.
  • Always make sure your server sends the correct Content-Type header.

💡 In short:
If your file doesn’t open properly, check the MIME type — not just the extension!