Check Browser Support for specific Mime Type?

Question

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!

Heterodoxy

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. – Ossifrage

Maybe this question helps. They used navigator.mimeTypes which probably won't work in all browsers... – Valentinavalentine

@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! – Heterodoxy

@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? – Heterodoxy

@Windwalker: I have no idea. That's too bad... – Ossifrage

@T.J.Crowder: I figured out I.E. sends "/" accept header on refreshes, refer to: gethifi.com/blog/browser-rest-http-accept-headers. Unfortunately, accept header's content depends on the resource requested. For ajax requests (which is what I am dealing with) there's no information about image, pdf or office support contained. Just open Firebug (or similar) and browse www.yahoo.com and have a look at the trace. Accept headers depend on the kind of resource requested. For images there's "image/png,image/*;q=0.8,/;q=0.5" contained. If I only could enforce that for ajax requests... – Heterodoxy

@Windwalker, did you ever find a workable solution for this? I'm looking at exactly the same problem myself and none of the answers here are satisfactory. The navigator.plugins example is indicating no support for even 'text/plain' or various image formats, so is not useful. – Hooten

@JohnRix, sorry, no. This question is a very old, I barely cannot remember my original concern. I guess we simply skipped this functionality in our product. Sorry. – Heterodoxy

Answer 1

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);
};

Fortnight

it works, but it says image/jpg is not supported in chrome. Is there way to get all types including the images. – Absher

@Тёма Пендюрин Does it recognize browser plugins? I installed a video player, but it still says video/mp4 in not supported. Also text/plain and image/* are falsly marked as 'not supported'. Can you describe how it is supposed to work and/or proof that it works as it should? – Capias

UPDATE: After testing it with several MIME Types (wiki.selfhtml.org/wiki/MIME-Type/%C3%9Cbersicht) it only worked for application/pdf. – Capias

Answer 2

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"));
    }
  });

Disrespectable

Thanks for the hint, which sounded quite promising. Unfortunately Ajax calls to binary files don't work in IE, please see: #9783830 – Heterodoxy

Ahhh darn, it seems to always stop at IE doesn't it :( – Disrespectable

Idea: How about you create a proxy for example : proxy.php?file=document.pdf IE will not handle this as binary file. And you can set your response header in you proxy. Just pass through mime type etc. – Disrespectable

It also seems you can use VB script hacks to make it work. Well good luck finding a solution! – Disrespectable

I tried that. But unfortunately, this doesn't answer the question, whether the current document's mime type can be displayed by the user's browser... – Heterodoxy

Guess we are defeated. Hope you find your solution. – Disrespectable

Answer 3

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

Check if a browser supports a specific MIME type?

Dietrich

Sorry, that's not exactly my case. I am clientside; i.e. Javascript (not PHP as in the issue referred) and I do have a document with a certain mime type and I'd like to decide whether to a) open show the document in an internal preview like <iFrame src="<URL to document>"></iFrame> or b) skip the internal preview, if mime type not supported – Heterodoxy

Answer 4

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

Saree

Actually the point is, our customers are nearly all using IE, since it's quite a standard for most companies. That's a big shit if you always haveto deal with old-fashioned browsers.... – Heterodoxy

Chrome is presenting bright red 'malware' warnings for that example link. – Hooten

Seems link has been corrupted, removed it. Idea is also visible in mozzilla's page. – Saree