JSFiddle - React, Tailwind, and code Playground

by ajwhiteway

HTML

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">

  <button>entire file</button>
</span>
<div id="byte_content"></div>

JavaScript

function readBlob() {

  var files = document.getElementById('files').files;
  if (!files.length) {
    alert('Please select a file!');
    return;
  }
  var file = files[0];

  console.log(file.type);

  var MIMEType = file.type;

  // decode base64 string, remove space for IE compatibility
  var reader = new FileReader();

  reader.onload = function(readerEvt) {


    var binaryString = readerEvt.target.result;
    var base64 = btoa(binaryString);
    var blobfile = atob(base64);


    console.log(base64);
    console.log("----------------------------------------------------");
    console.log(blobfile);



    window.blobFromBinary = new Blob([binaryString], {
      type: MIMEType
    });
    window.blobURL1 = URL.createObjectURL(window.blobFromBinary);

    window.blobFromBase64 = new Blob([base64], {
      type: MIMEType
    });
    window.blobURL2 = URL.createObjectURL(window.blobFromBase64);

    window.blobFromBlobFile = new Blob([blobfile], {
      type: MIMEType
    });
    window.blobURL3 = URL.createObjectURL(window.blobFromBlobFile);


    if (MIMEType != "image/jpeg") {
      var a = "<a href=\"" + window.blobURL1 + "\">Binary Blob Link</a>";
      a += "<br /><a href=\"" + window.blobURL2 + "\">Base 64 Link</a>";
      a += "<br /><a href=\"" + window.blobURL3 + "\">Blob File Link</a>";
    } else {
      a = "<img src=" + window.blobURL1 + "\>";
      a += "<img src=" + window.blobURL2 + "\>";
      a += "<img src=" + window.blobURL3 + "\>";
    }

    document.getElementById('byte_content').innerHTML = a;

  };

  reader.readAsBinaryString(file);
}

document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
  if (evt.target.tagName.toLowerCase() == 'button') {
    readBlob();
  }
}, false);

function changefunction(args) {
  readBlob();
}