JSFiddle - React, Tailwind, and code Playground

by kunalvashist

HTML

Select file : <input type="file" id="flUpload" name="files[]"/>
<br/><br/>

File Size is : <b><label id="lblSize" /></b><br />
Name of File :<b><label id="fName" /></b><br />
Type of File :<b><label id="fType" /></b><br />
Last Modified:<b><label id="fModified" /></b>

<br />
<output id="imageFrame"></output>


<div id="progress_bar"><div class="percent">0%</div></div>

CSS

.thumb {
     height: 75px;
     border: 1px solid #000;
     margin: 10px 5px 0 0;
   }
   
   body
 {
     font-family: Arial;
     font-size : 10pt;
     padding : 10px;
 }
 
 #progress_bar {
     margin: 10px 0;
     padding: 3px;
     border: 1px solid #000;
     font-size: 14px;
     clear: both;
     opacity: 0;
     -moz-transition: opacity 1s linear;
     -o-transition: opacity 1s linear;
     -webkit-transition: opacity 1s linear;
   }
   #progress_bar.loading {
     opacity: 1.0;
   }
   #progress_bar .percent {
     background-color: #99ccff;
     height: auto;
     width: 0;
   }
   #showDetail
   {
       display:none;
   }

JavaScript

$(document).ready(function() {

        var progress = document.querySelector('.percent');
        function updateProgress(evt) {

            if (evt.lengthComputable) {
                var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
                if (percentLoaded < 100) {
                    progress.style.width = percentLoaded + '%';
                    progress.textContent = percentLoaded + '%';
                }
            }
        }

        function errorHandler(evt) {

        }

        if (window.File && window.FileReader && window.FileList && window.Blob) {
            alert('browser supports everything');
        } else {
            alert('The File APIs are not fully supported in this browser.');
        }

        $("#flUpload").change(function() {
            if (document.getElementById('imageFrame')) {
                document.getElementById('imageFrame').innerHTML = "";
            }
            var f = $("#flUpload")[0].files[0];
            var name = $("#flUpload")[0].files[0].name;
            $("#fName").html(" " + name);
            var type = $("#flUpload")[0].files[0].type;
            $("#fType").html(" " + type);
            var lastmodified = $("#flUpload")[0].files[0].lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a';
            $("#fModified").html(" " + lastmodified);


            if (f.type.match('image.*')) {
                progress.style.width = '0%';
                progress.textContent = '0%';

                var reader = new FileReader();

                reader.onerror = errorHandler;
                reader.onprogress = updateProgress;

                reader.onloadstart = function(e) {

                    document.getElementById('progress_bar').className = 'loading';
                };
                reader.onload = (function(param) {


                    setTimeout("document.getElementById('progress_bar').className='';", 2000);

                    return function(e) {
          ...