How to Get a File'S Media Type (Mime Type)

How to get a file's Media Type (MIME type)?

In Java 7 you can now just use Files.probeContentType(path).

How can I find out a file's MIME type (Content-Type)?

Use file. Examples:

> file --mime-type image.png
image.png: image/png

> file -b --mime-type image.png
image/png

> file -i FILE_NAME
image.png: image/png; charset=binary

How to check file MIME type with JavaScript before upload?

You can easily determine the file MIME type with JavaScript's FileReader before uploading it to a server. I agree that we should prefer server-side checking over client-side, but client-side checking is still possible. I'll show you how and provide a working demo at the bottom.

Check that your browser supports both File and Blob. All major ones should.

if (window.FileReader && window.Blob) {
    // All the File APIs are supported.
} else {
    // File and Blob are not supported
}

Step 1:

You can retrieve the File information from an <input> element like this (ref):

<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    // When the control has changed, there are new files
    var files = control.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

Here is a drag-and-drop version of the above (ref):

<div id="your-files"></div>
<script>
var target = document.getElementById("your-files");
target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {
    // Cancel default actions
    event.preventDefault();
    var files = event.dataTransfer.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

Step 2:

We can now inspect the files and tease out headers and MIME types.

✘ Quick method

You can naïvely ask Blob for the MIME type of whatever file it represents using this pattern:

var blob = files[i]; // See step 1 above
console.log(blob.type);

For images, MIME types come back like the following:

image/jpeg

image/png

...

Caveat: The MIME type is detected from the file extension and can be fooled or spoofed. One can rename a .jpg to a .png and the MIME type will be be reported as image/png.

✓ Proper header-inspecting method

To get the bonafide MIME type of a client-side file we can go a step further and inspect the first few bytes of the given file to compare against so-called magic numbers. Be warned that it's not entirely straightforward because, for instance, JPEG has a few "magic numbers". This is because the format has evolved since 1991. You might get away with checking only the first two bytes, but I prefer checking at least 4 bytes to reduce false positives.

Example file signatures of JPEG (first 4 bytes):

FF D8 FF E0 (SOI + ADD0)

FF D8 FF E1 (SOI + ADD1)

FF D8 FF E2 (SOI + ADD2)

Here is the essential code to retrieve the file header:

var blob = files[i]; // See step 1 above
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  var header = "";
  for(var i = 0; i < arr.length; i++) {
     header += arr[i].toString(16);
  }
  console.log(header);

  // Check the file signature against known types

};
fileReader.readAsArrayBuffer(blob);

You can then determine the real MIME type like so (more file signatures here and here):

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown"; // Or you can use the blob.type as fallback
        break;
}

Accept or reject file uploads as you like based on the MIME types expected.

Demo

Here is a working demo for local files and remote files (I had to bypass CORS just for this demo). Open the snippet, run it, and you should see three remote images of different types displayed. At the top you can select a local image or data file, and the file signature and/or MIME type will be displayed.

Notice that even if an image is renamed, its true MIME type can be determined. See below.

Screenshot

Expected output of demo

// Return the first few bytes of the file as a hex stringfunction getBLOBFileHeader(url, blob, callback) {  var fileReader = new FileReader();  fileReader.onloadend = function(e) {    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);    var header = "";    for (var i = 0; i < arr.length; i++) {      header += arr[i].toString(16);    }    callback(url, header);  };  fileReader.readAsArrayBuffer(blob);}
function getRemoteFileHeader(url, callback) {  var xhr = new XMLHttpRequest();  // Bypass CORS for this demo - naughty, Drakes  xhr.open('GET', '//cors-anywhere.herokuapp.com/' + url);  xhr.responseType = "blob";  xhr.onload = function() {    callback(url, xhr.response);  };  xhr.onerror = function() {    alert('A network error occurred!');  };  xhr.send();}
function headerCallback(url, headerString) {  printHeaderInfo(url, headerString);}
function remoteCallback(url, blob) {  printImage(blob);  getBLOBFileHeader(url, blob, headerCallback);}
function printImage(blob) {  // Add this image to the document body for proof of GET success  var fr = new FileReader();  fr.onloadend = function() {    $("hr").after($("<img>").attr("src", fr.result))      .after($("<div>").text("Blob MIME type: " + blob.type));  };  fr.readAsDataURL(blob);}
// Add more from http://en.wikipedia.org/wiki/List_of_file_signaturesfunction mimeType(headerString) {  switch (headerString) {    case "89504e47":      type = "image/png";      break;    case "47494638":      type = "image/gif";      break;    case "ffd8ffe0":    case "ffd8ffe1":    case "ffd8ffe2":      type = "image/jpeg";      break;    default:      type = "unknown";      break;  }  return type;}
function printHeaderInfo(url, headerString) {  $("hr").after($("<div>").text("Real MIME type: " + mimeType(headerString)))    .after($("<div>").text("File header: 0x" + headerString))    .after($("<div>").text(url));}
/* Demo driver code */
var imageURLsArray = ["http://media2.giphy.com/media/8KrhxtEsrdhD2/giphy.gif", "http://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png", "http://static.giantbomb.com/uploads/scale_small/0/316/520157-apple_logo_dec07.jpg"];
// Check for FileReader supportif (window.FileReader && window.Blob) {  // Load all the remote images from the urls array  for (var i = 0; i < imageURLsArray.length; i++) {    getRemoteFileHeader(imageURLsArray[i], remoteCallback);  }
  /* Handle local files */  $("input").on('change', function(event) {    var file = event.target.files[0];    if (file.size >= 2 * 1024 * 1024) {      alert("File size must be at most 2MB");      return;    }    remoteCallback(escape(file.name), file);  });
} else {  // File and Blob are not supported  $("hr").after( $("<div>").text("It seems your browser doesn't support FileReader") );} /* Drakes, 2015 */

img {  max-height: 200px}div {  height: 26px;  font: Arial;  font-size: 12pt}form {  height: 40px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><form>  <input type="file" />  <div>Choose an image to see its file signature.</div></form><hr/>

PHP: How to properly check MIME type of a file?

To get MIME type, developers generally depend on $_FILES['input_name']['type']. But this is absolutely vulnerable. Because a malicious user can set one of image/jpg, image/png, image/gif etc. MIME types to a file that is not actually an image. In that case, the malicious user may get your script pass to upload other file instead of an image and execute your script for their purposes which is dangerous.

So I recommend that you do not depend on the following snippet to get MIME of a file

$_FILE['input_name']['type'];

Rather I would recommend use this mime_content_type() function to get MIME type but with the help of other PHP's built-in function. And that is is_uploaded_file() function. What it does is:

This is useful to help ensure that a malicious user hasn't tried to
trick the script into working on files upon which it should not be
working--for instance, /etc/passwd.
This sort of check is especially important if there is any chance that
anything done with uploaded files could reveal their contents to the
user, or even to other users on the same system.

So to make this function work properly it needs a specific argument. Check out the code below:

if (is_uploaded_file($_FILES['input_name']['tmp_name'])) {
    // Do other stuff.
}

This function returns true on success, false otherwise. So if it returns true then you're ok with the file. Thanks to this function. Now mime_content_type() function comes into play. How? Look at the code below:

if (is_uploaded_file($_FILES['input_name']['tmp_name'])) {
    // Notice how to grab MIME type.
    $mime_type = mime_content_type($_FILES['input_name']['tmp_name']);

    // If you want to allow certain files
    $allowed_file_types = ['image/png', 'image/jpeg', 'application/pdf'];
    if (! in_array($mime_type, $allowed_file_types)) {
        // File type is NOT allowed.
    }

    // Set up destination of the file
    $destination = '/path/to/move/your/file/';

    // Now you move/upload your file
    if (move_uploaded_file ($_FILES['input_name']['tmp_name'] , $destination)) {
        // File moved to the destination
    }
}

BTW, for novice, do not try remote url with this function to get MIME type. The code below will not work:

mime_content_type('http://www.example.com/uploads/example.png');

But the one below would work:

mime_content_type('/source/to/your/file/etc.png');

Hope you would enjoy uploading file from now on.

How to get type of file?

You can make use of the mime package from the Dart team to extract the MIME types from file names:

import 'package:mime/mime.dart';

final mimeType = lookupMimeType('/some/path/to/file/file.jpg'); // 'image/jpeg'

Helper functions

If you want to know whether a file path represents an image, you can create a function like this:

import 'package:mime/mime.dart';

bool isImage(String path) {
  final mimeType = lookupMimeType(path);

  return mimeType.startsWith('image/');
}

Likewise, if you want to know if a path represents a document, you can write a function like this:

import 'package:mime/mime.dart';

bool isDocument(String path) {
  final mimeType = lookupMimeType(path);

  return mimeType == 'application/msword';
}

You can find lists of MIME types at IANA or look at the extension map in the mime package.

From file headers

With the mime package, you can even check against header bytes of a file:

final mimeType = lookupMimeType('image_without_extension', headerBytes: [0xFF, 0xD8]); // jpeg

How to Get a File'S Media Type (Mime Type)