JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<script src="http://pajhome.org.uk/crypt/md5/sha1.js"></script>
<div class="container">
    <input type="file" id="files" name="file" /> <span class="sha1ButtonsTest">
     <button id=testBtn>SHA1 Hash</button>
    </span>

    <div id="filesize"></div>
    <div id="progress">
        <div id="progress-bar"></div>
    </div>
</div>

CSS

.container {
      width: 320px;
      height: 100px;
      position: relative;
      background: #EEE;
  }
  #picker {
  }
  #filesize {
      position: absolute;
      bottom: 25px;
      width: 100%;
      height: 25px;
      background: #EEE;
  }
  #progress {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 25px;
      background: rgba(202, 131, 46, 0.25);
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#4cCA832E', endColorstr='#4cCA832E');
  }
  #progress-bar {
      position: absolute;
      left: 0;
      top: 0;
      background: #CA832E;
      height: 100%;
      width: 0%;
  }

JavaScript

/* 

following is code from http://pajhome.org.uk/crypt/md5/contrib/sha1_stream.js 

modified as per suggestion in comment by user "Zarat" @ http://stackoverflow.com/a/3204839/830899

*/
/**
 * Support for generating SHA-1 of a stream.
 *
 * Based on http://pajhome.org.uk/crypt/md5/sha1.js.
 */

function naked_sha1_head() {
    var w = Array(80);
    var a = 1732584193;
    var b = -271733879;
    var c = -1732584194;
    var d = 271733878;
    var e = -1009589776;
    return [w, a, b, c, d, e, [], 0, 0];
}

function naked_sha1(x, len, h) {
    var w = h[0],
        a = h[1],
        b = h[2],
        c = h[3],
        d = h[4],
        e = h[5];
    /* prepend data from last time */
    var old_len = h[8];
    var blen = x.length;
    if (x.length > 0) {
        var shift = old_len % 32;
        if (shift > 0) {
            h[6][old_len >> 5] |= x[0] >> shift;
            for (var i = 0; i < x.length - 1; i++) {
                x[i] = x[i] << (32 - shift) | x[i + 1] >> shift;
            }
            x[x.length - 1] <<= 32 - shift;
        }
    }
    x = h[6].concat(x)
    var max = (old_len + len) >> 5;
    max -= max % 16;
    for (var i = 0; i < max; i += 16) {
        var olda = a;
        var oldb = b;
        var oldc = c;
        var oldd = d;
        var olde = e;

        for (var j = 0; j < 80; j++) {
            if (j < 16) w[j] = x[i + j];
            else w[j] = rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);
            var t = safe_add(safe_add(rol(a, 5), sha1_ft(j, b, c, d)),
            safe_add(safe_add(e, w[j]), sha1_kt(j)));
            e = d;
            d = c;
            c = rol(b, 30);
            b = a;
            a = t;
        }

        a = safe_add(a, olda);
        b = safe_add(b, oldb);
        c = safe_add(c, oldc);
        d = safe_add(d, oldd);
        e = safe_add(e, olde);
    }
    h[0] = w;
    h[1] = a;
    h[2] = b;
    h[3] = c;
    h[4] = d;
    h[5] = e;
    /* store extra for next time */
    h[6] =...