For a web application which allows in-browser preview of documents, I'd like to check whether the user's browser supports preview of the current document's mime type.

Is there a Javascript-based way to match the current mime type against the types supported by the browser?

Thanks!

For a web application which allows in-browser preview of documents, I'd like to check whether the user's browser supports preview of the current document's mime type.

Is there a Javascript-based way to match the current mime type against the types supported by the browser?

Thanks!

• javascript
• mime-types
• browser-support

• When the browser requested the page from the server on which you want to do this, it sent through a list of the kinds of documents it accepts (the HTTP accept request header). So you can actually know before you even show them the page (and you can make that information available to JavaScript by embedding it in the response). Of course, that requires you to dynamically respond to the initial request, and may not be what you're looking for. – T.J. Crowder Commented Feb 12, 2013 at 15:03
• Maybe this question helps. They used navigator.mimeTypes which probably won't work in all browsers... – hsan Commented Feb 12, 2013 at 15:03
• @T.J.Crowder: thats a good idea. Since my application is ExtJS-Ajax-based that can be a quite a promising approach. I'll give it a try. Thanks! – Windwalker Commented Feb 12, 2013 at 16:50
• 1 @T.J.Crowder: I just tested the approach of reading http accept header. Unfortunately, the information retrieved is not very useful. Accept header in Firefox is: "text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8" IE just "/" Why is there so few information contained? – Windwalker Commented Feb 13, 2013 at 8:27
• @Windwalker: I have no idea. That's too bad... – T.J. Crowder Commented Feb 13, 2013 at 8:31

4 Answers 4

In recent browsers there are navigatior.plugins array-like object. You can check each plugin for your mime type.

Here is the solution gist and jsfiddle.

var mimeCheck = function (type) {
    return Array.prototype.reduce.call(navigator.plugins, function (supported, plugin) {
        return supported || Array.prototype.reduce.call(plugin, function (supported, mime) {
            return supported || mime.type == type;
        }, supported);
    }, false);
};

You could make an AJAX call and check response headers for mimetype.

 $.ajax({
    type: "GET",
    url: 'http://..../thing.pdf',
    success: function (output, status, xhr) {
      alert("done!"+ xhr.getAllResponseHeaders());
      alert("done!"+ xhr.getResponseHeader("Content-Type"));
    }
  });

In this question there was the same question I think, try to check out it

Check if a browser supports a specific MIME type?

If you define which plugin is needed for specific document type, then you may try to look if needed plugin exists. Should work at least on Firefox and Chrome. window.navigator.plugins