JSFiddle - React, Tailwind, and code Playground

by abufiddle

HTML

<div>
    <div>
        <label for="filePicker">Choose file:</label><br>
        <input type="file" id="filePicker" onchange="handleFileSelect(event)">
    </div>
    <br>
    <div>
        <h3>Base64 encoded version</h3>
        <textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15"></textarea>
    </div>
</div>


<!-- Reference link -->
<!-- https://blog.web-worker.in/convert-base64-string-file-javascript/ -->
<button onclick="checkForMIMEType1();">click-1

</button>

<!-- Reference links -->
<!-- https://dev.to/nombrekeff/download-file-from-blob-21ho -->
<!--https://codepen.io/keff/pen/ExPVjWz?__cf_chl_jschl_tk__=8c5c0cfac4de098eb12ba92309145dc68643bff5-1597830128-0-Ade8bVhJZG53FCDesu30dabzufqYvSB4XvNRP9H-lCyvZRmtpu8GgG077rGXOguu0C39UQ4r4405hNcgl7FyUMBzX_U8sE9AEXqlNg93AuSzsUl3vsaHZYHZZtKrlMViEbOiAigRwUlH-eoHe7LhK18vtYrCZvclsHsi9cPaejU_ZxZoyUagSQIiDkOFZFCejZMl2oHd5IX5Io2EsxPg8rQqjFRklhNh5LW-U8f4VYtObVA_7oHun63Rp2FD1FDciKeC4jzRnZMkyqtTL2mKEnXL_s9o3vJl646J9fzh55ityFXZDMeMO-R94CgCZJqQk0HWYiEwlA3FZUpx5gmsjviN8dLGDRWLMU13EdiRDaVq -->
<button onclick="downloadBlob1();">click-2(download)

</button>

JavaScript

var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];
    if (files && file) {
        var reader = new FileReader();
        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString); // display purposes only
            responsez.content = btoa(binaryString);
            download(binaryString);
        };
        reader.readAsBinaryString(file);
    }
};
function download(file){
  var blob = new Blob([str2bytes(file)], {type: "application/zip"});
	saveAs(blob, "_DATA.zip");
}
function str2bytes (str) {
    var bytes = new Uint8Array(str.length);
    for (var i=0; i<str.length; i++) {
        bytes[i] = str.charCodeAt(i);
    }
    return bytes;
}




var blobz;
var responsez = {
mimetype: 'pdf',
content: ''
}

function checkForMIMEType(response) {
  var blob;
  if (response.mimetype == 'pdf') {
    blob = converBase64toBlob(response.content, 'application/pdf');
  } else if (response.mimetype == 'doc') {
    blob = converBase64toBlob(response.content, 'application/msword'); 
    /*Find the content types for different format of file at http://www.freeformatter.com/mime-types-list.html*/
  }
  var blobURL = URL.createObjectURL(blob);
  window.open(blobURL);
}
function converBase64toBlob(content, contentType) {
  contentType = contentType || '';
  var sliceSize = 512;
  var byteCharacters = window.atob(content); //method which converts base64 to binary
  var byteArrays = [
  ];
  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);
    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  var blob = new Blob(byteArrays, {
    type: contentType
  });...