<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ASTEF</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    </head>

    <body>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>ASTEF Project WebReader</h1>
                    <hr>

                    <p>First of all, choose a <strong>.txt</strong> file with the right format.</p>
                    <p><input type="file" id="upload" class="form-control" /></p>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

        <script>
            function readNewFile(event){
                var f = event.target.files[0];

                if (!f) {
                    alert("Failed to load the file.");
                } else if (!f.type.match('text.*')) {
                    alert(f.name + " is not a valid text file!");
                } else {
                    // TODO: create json data for chart, create it
                }
            }

            function checkFileReaderSupport(){
                if (window.File && window.FileReader && window.FileList && window.Blob) {
                    document.getElementById('upload').addEventListener('change', readNewFile, false);
                } else {
                    alert('The File APIs are not fully supported by your browser.');
                    $('#upload').prop('disabled', true);
                }
            }

            $(document).ready(function(){
                checkFileReaderSupport();
            });
        </script>
    </body>
</html>
Create html file skelton for the web app with basic txt file load
Create html file skelton for the web app with basic txt file load
