JSFiddle - React, Tailwind, and code Playground

JavaScript

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

var xhr = new XMLHttpRequest();
var photoUrl = 'http://fiddle.jshell.net/img/initializing.png';
xhr.open('GET', photoUrl, true);

// This stops the browser from parsing the data as UTF-8:
xhr.overrideMimeType('application/octet-stram; charset=x-user-defined');
xhr.responseType = "arraybuffer";
xhr.setRequestHeader('Range', 'bytes=0-');

function onInitFs(fs) {
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 206)) {
      fs.root.getFile('image.jpg', {'create': true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
          fileWriter.onwriteend = function(event) {
              
            $('body').append('<img src="' + fileEntry.toURL() + '"/>');
          }
            
          var arrayBuffer = xhr.response; // Note: not xhr.responseText
          
          if (arrayBuffer)
          {
              var byteArray = new Uint8Array(arrayBuffer);
          }
          var blob = new Blob([ byteArray ], { type: 'image/jpeg' } )

          fileWriter.write(blob);
        }, errorHandler );
      });
    }
  }
  xhr.send();
}

var errorHandler = function(err) {
  console.log(err);
}

$(function() {
  webkitStorageInfo.requestQuota(window.TEMPORARILY, 1024*1024*1024*1024, function(grantedBytes) {
     //todo - check that grantedBytes > file length
    requestFileSystem(window.TEMPORARILY, grantedBytes, onInitFs, errorHandler)
  }, errorHandler)
})