JSFiddle - React, Tailwind, and code Playground

by Panusitt Khuenkham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-12">
    <form id="form-test-bmz" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="fileUpload" id="fileUpload">
      </div>
      <a href="#" class="hidden" id="filedownload" download="#">loadF</a>
      <button type="button" class="btn btn-success" id="btnAttachFile">
        <span class="glyphicon glyphicon-save" aria-hidden="true"></span> 
        Upload File
      </button>
    </form>
    </div>
    <hr>
    <div class="col-md-12">
      <table class="table table-bordered" id="table-file-upload">
        <thead>
          <th class="text-center">File name</th>
          <th class="text-center">File size</th>
          <th class="text-center">Download</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function(){

  $('button#btnAttachFile').on('click', function() {

    if($('input#fileUpload').val() == ''){
      alert('Please choose a file.');
      return false;
    }

    let fileUpload = $('input#fileUpload');
    let fileName = fileUpload[0].files[0].name;
    let fileSize = fileUpload[0].files[0].size;

    fileSize = Math.ceil(fileSize/1024);

    $('table#table-file-upload').find('tbody').empty();

    var rowTr = $('<tr>'
        +'<td class="text-left">'+fileName+'</td>'
        +'<td class="text-center">'+fileSize+' KB</td>'
        +'<td class="text-center"><a href="" id="clickLoadFile"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></a></td>'
        +'</tr>');
        
    rowTr.find('a#clickLoadFile').on('click', function(e) {
      btnAttachFileDownload();
      e.preventDefault();
    });
    $('table#table-file-upload').find('tbody').append(rowTr);
  });

  function btnAttachFileDownload() {

    let fileUpload = $('input#fileUpload');
    let fileName = fileUpload[0].files[0].name;
    let fileSize = fileUpload[0].files[0].size;

    var reader = new FileReader();
    reader.readAsDataURL(fileUpload[0].files[0]);
    reader.onload = function () {
      var blob = b64toBlob(reader.result);
      if(window.navigator.msSaveOrOpenBlob) {
				console.log('IE 11');
        // IE 11
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
				console.log('Google chome, Firefox, ....');
        // Google chome, Firefox, ....
        var url = (window.URL || window.webkitURL).createObjectURL(blob);
        $('#filedownload').attr('download', fileName);  
        $('#filedownload').attr('href', url);  
        $('#filedownload')[0].click();
      }
     };
     reader.onerror = function (error) {
       console.log('Error: ' + error);
     };
  };

  /**
     * Description: Convert base64 to Blob.
     * Using: global.b64toBlob(base64, sliceSize);
     * 
     *** sliceSize No need.
  **/
 ...