Add support for file protocol (File URI Schema)

[ryantbd]

This commit would work while fetching a file:/// protocol resource, mentioned in issue #91

[f15gdsy]

+1 for this pull.

[charandas]

+1 for this pull.

[mislav]

Neither Chrome's nor Firefox's native implementation supports fetching local files. I think it was intentionally.

The fetch spec doesn't explicitly forbid the file: protocol, but it doesn't specify any details about it either, and is left "as an exercise to the reader".

I'm sorry, but I don't think fetch is meant for local files right now. You're better off using XHR.

[ccapndave]

Just a note to point out that this is quite annoying when making hybrid mobile apps (e.g. with Cordova) which regularly need access to local files.

[screendriver]

+1 for Cordova Apps

[mislav]

function fetchLocal(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest
    xhr.onload = function() {
      resolve(new Response(xhr.responseText, {status: xhr.status}))
    }
    xhr.onerror = function() {
      reject(new TypeError('Local request failed'))
    }
    xhr.open('GET', url)
    xhr.send(null)
  })
}

[thw0rted]

I think this was mentioned elsewhere, but as of today Firefox supports fetch for file:// URLs, when running in a file:// origin. I believe the restriction is that the requested file must be in or under the working directory where the top page is loaded from.

Chrome/Chromium still does not, but I have submitted a bug report because XHR does support it, with the appropriate command-line switch.

[dineiar]

To summarize, mislav's suggestion only works in Chrome with --allow-file-access-from-files flag (from thw0rted's bug report).

[wbelhomsi]

inspired by @mislav
if using a framework that uses webpack or browserify put this in a script tag at the top of the index.html its not a foolproof solution but it does the job

(function() {
  var nativeFetch = window.fetch;
  if(nativeFetch) {
    var a = document.createElement('a');
    window.fetch = function(url) {
      a.href = url;
      var full_url = a.href;
      if(full_url.indexOf('file:') === 0) {
        return new Promise(function(resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onload = function() {
            resolve(new Response(xhr.responseText, {status: xhr.status}));
          };
          xhr.onerror = function(err) {
            reject(new TypeError('Local request failed'));
          };
          xhr.open('GET', url);
          xhr.send(null);
        });
      }
      else {
        return nativeFetch.call(this, Array.prototype.slice.apply(arguments));
      }
    };
  }
})();

In case you are using something like angular and then using cordova to transform it into an application you can put the below at the top of the pollyfills.ts(find in the src folder) file

(function() {
  const nativeFetch = window.fetch;
  if(nativeFetch) {
    const a = document.createElement('a');
    window.fetch = function(url: any) {
      a.href = url;
      const full_url = a.href;
      if(full_url.indexOf('file:') === 0) {
        return new Promise(function(resolve, reject) {
          const xhr = new XMLHttpRequest();
          xhr.onload = function() {
            resolve(new Response(xhr.responseText, {status: xhr.status}));
          };
          xhr.onerror = function(err) {
            reject(new TypeError('Local request failed'));
          };
          xhr.open('GET', url);
          xhr.send(null);
        });
      }
      else {
        return nativeFetch.call(this, Array.prototype.slice.apply(arguments));
      }
    };
  }
})();