JSFiddle - React, Tailwind, and code Playground

by davidmurdoch

HTML

Hey, this isn't tested in anything but Chrome Canary, Chrome stable, and FF 12.0. :-)

JavaScript

var getSupportedImageExtensions = function(){
    var defaults = ['gif', 'jpg', 'jpeg', 'png']
      , navigator = window.navigator;

    if (!('mimeTypes' in navigator)) return defaults;

    // generate a list of accepted extensions based on the mimeTypes that are
    // stored in the browser.
    var mimeTypes = Array.prototype.slice.call(navigator.mimeTypes, 0)
      , i = mimeTypes.length;

    while (i--) {
      var mimeType = mimeTypes[i]
        , type = mimeType.type
        , suffixes = mimeType.suffixes
        , j;

      // we only want image types with non-empty suffixes
      if (!suffixes || !suffixes.split || !type || type.indexOf('image/') !== 0) continue;
       
      suffixes = suffixes.split(',');
      j = suffixes.length

      // add the extensions to the defaults array if they don't exit there
      // already
      while (j--) {
        if (indexOf(defaults, suffixes[j]) === -1) {
          defaults.push(suffixes[j]);
        }
      }
    }

    return defaults;
};
document.body.innerHTML = getSupportedImageExtensions().join("<br>")

    
    
    
    

// helpers    
function indexOf (arr, o, i) {
    var j = arr.length;
    i = i < 0 ? i + j < 0 ? 0 : i + j : i || 0;

    // iterate all the things
    for (; i < j && arr[i] !== o; i++) {}

    return j <= i
      ? -1
      : i;
};