JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<input type='file' id='files' name='files[]' multiple />
<output id='list'></output>
<div id='button'>Click Me</div>

CSS

strong{
    color: red;
}

JavaScript

var idRegEx = /GTG-(\w{2,4}\d?)/i;
var sizeRegEx = /\d+(?:GB|MB)/i;

function parseData(data) {
    var lines = data.split('\n');
    for (var i = 0; i < lines.length; i++) {
        lines[i] = lines[i].split(',');
    }
    var compId = lines[3][0].match(idRegEx),
        servCount = 0,
        snapsTaken = 0,
        snapFails = 0,
        vitFails = 0,
        mountFails = 0,
        sqlFails = 0,
        repInQueue = 0;
    while (lines[servCount + 15][2] !== '') {
        var currentLine = lines[servCount + 15];
        snapsTaken += parseInt(currentLine[2]);
        snapFails += parseInt(currentLine[3]);
        vitFails += parseInt(currentLine[5]);
        mountFails += parseInt(currentLine[7]);
        sqlFails += parseInt(currentLine[9]);
        repInQueue = parseInt(currentLine[11]);
        servCount++;
    }
    var company = {
        id: compId ? compId[0] : '',
        percent: servCount * 24 / snapsTaken * 100,
        fails: {
            snaps: snapFails,
            vits: vitFails,
            mounts: mountFails,
            sql: sqlFails
        },
        replication: repInQueue
    };
    return company;
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    if (!files.length) {
        alert('Please select a file!');
        return;
    }
    var file = files[0],
        start = 0,
        end = file.size;

    var reader = new FileReader();

    reader.onloadend = function(evt) {
        if (evt.target.readyState == FileReader.DONE) {
            fileData = evt.target.result;
            company = parseData(fileData);
            document.getElementById('list').textContent = company;
        }
    };

    var blob = file.slice(start, end);
    reader.readAsText(blob);
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);


document.getElementById('button').addEventListener('click', function() {
    alert(fileData);
    console.log(company);
}, false);