oleduc/index.html

## index.html
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
    <script>
        (function($) {
            $(document).ready(function(){
                var socket = io.connect('http://localhost:3000',{ path: '/', transports: ["websocket"] });
                var files = null;
                var apiCookie = null;
                var BLOCK_SIZE = null;
                var API_URL = null;
                var API_AUTH_PATH = null;
                // ===========================================================================================================
                socket.on('config', function(data) {
                    BLOCK_SIZE = parseInt(data.BLOCK_SIZE);
                    API_URL = data.API_URL;
                    API_AUTH_PATH = data.API_AUTH_PATH;
                    console.log('Initial configuration', data);
                });
                socket.on('progress', function(progress) {
                    console.log('Progress -> ',progress);
                    updateUI(progress);
                });
                socket.on('request block', function (data){
                    console.log('Block requests -> ', data);
                    var file = null;
                    var reader = new FileReader();
                    for(var i = 0; i < files.length; i++) {
                        if (files[i].name === data['name']) {
                            var block_start = data['block_number'] * BLOCK_SIZE;
                            var block_end = block_start + Math.min(BLOCK_SIZE, (files[i].size - block_start))
                            var newBlock;

                            if(files[i].slice) {
                                newBlock = files[i].slice(block_start, block_end);
                            } else if(file.webkitSlice) {
                                newBlock = files[i].webkitSlice(block_start, block_end);
                            } else {
                                newBlock = files[i].mozSlice(block_start, block_end);
                            }

                            file = files[i];

                            break;
                        }
                    }
                    reader.readAsArrayBuffer(newBlock);

                    reader.onload = function(evnt){
                        var data_to_be_sent = { 'name' : file.name, 'block' : evnt.target.result };
                        console.log('Sending -> ', data_to_be_sent);
                        console.log(data_to_be_sent.block);
                        socket.emit('upload', data_to_be_sent);
                    }
                });
                socket.on('upload complete', function(data) {
                    console.log('Upload completed -> ', data);
                });
                socket.on('upload error', function(data) {
                    console.log('Upload error -> ', data);
                });
                socket.on('error', function(data) {
                    console.log('Error:', data);
                    $('.error').text('Error: '+ data);
                });
                socket.on('connect_error', function(data) {
                    console.log('Error:', data);
                    $('.error').text(data);
                });
                // ===========================================================================================================
                // ===========================================================================================================
                $('.disconnect').on('click', function(e) {
                    if (socket.connected === true && socket.disconnected === false) {
                        socket.disconnect();
                    }
                });
                $('.connect').on('click', function(e) {
                    if (socket.connected === false && socket.disconnected === true) {
                        console.log('Connecting');
                        socket.connect();
                    } else {
                        console.log('Already connected');
                    }
                });
                $('.upload').on('click', function(e) {
                    var uploadFiles = document.getElementById('js-upload-files').files;
                    e.preventDefault()
                    files = uploadFiles;
                    for(var i = 0; i < uploadFiles.length; i++) {
                        console.log('Start upload for', uploadFiles[i].name);
                        socket.emit('start upload', {
                            'name' : uploadFiles[i].name,
                            'size' : uploadFiles[i].size
                        });
                    }
                });
                // ===========================================================================================================
                function updateUI(progress) {
                    $('.progress-bar').attr('aria-valuenow', progress);
                    $('.progress-bar').css('width', progress + '%')
                    $('.sr-only').text(progress + '% complete');
                }
            });
        })(jQuery);
    </script>
</head>
<body>
<div class="container">
    <div class="form-group">
        <label for="exampleInputEmail1">Server address</label>
        <input type="text" class="form-control" id="address" placeholder="Address">
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>Upload Files</strong> <small>Bootstrap files upload</small>
        </div>
        <div class="panel-body">

            <!-- Standar Form -->
            <h4>Select files from your computer</h4>
            <form action="" id="js-upload-form">
                <div class="form-inline">
                    <div class="form-group">
                        <input type="file" name="files[]" id="js-upload-files" multiple>
                    </div>
                </div>
            </form>

            <!-- Progress Bar -->
            <div>
                <h5>File 1</h5>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                        <span class="sr-only">0% Complete</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="controls" style="text-align: center;">
        <button type="button" class="upload btn btn-primary">Test upload</button>
        <button type="button" class="connect btn btn-success">Connect</button>
        <button type="button" class="disconnect btn btn-danger">Disconnect</button>
    </div>
    <div class="messages" style="text-align:center;">
        <span class="error" style="color:red;font-size:20px;"></span>
    </div>
</div> <!-- /container -->
</body>
</html>
	<html>
	<head>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
	<script>
	(function($) {
	$(document).ready(function(){
	var socket = io.connect('http://localhost:3000',{ path: '/', transports: ["websocket"] });
	var files = null;
	var apiCookie = null;
	var BLOCK_SIZE = null;
	var API_URL = null;
	var API_AUTH_PATH = null;
	// ===========================================================================================================
	socket.on('config', function(data) {
	BLOCK_SIZE = parseInt(data.BLOCK_SIZE);
	API_URL = data.API_URL;
	API_AUTH_PATH = data.API_AUTH_PATH;
	console.log('Initial configuration', data);
	});
	socket.on('progress', function(progress) {
	console.log('Progress -> ',progress);
	updateUI(progress);
	});
	socket.on('request block', function (data){
	console.log('Block requests -> ', data);
	var file = null;
	var reader = new FileReader();
	for(var i = 0; i < files.length; i++) {
	if (files[i].name === data['name']) {
	var block_start = data['block_number'] * BLOCK_SIZE;
	var block_end = block_start + Math.min(BLOCK_SIZE, (files[i].size - block_start))
	var newBlock;

	if(files[i].slice) {
	newBlock = files[i].slice(block_start, block_end);
	} else if(file.webkitSlice) {
	newBlock = files[i].webkitSlice(block_start, block_end);
	} else {
	newBlock = files[i].mozSlice(block_start, block_end);
	}

	file = files[i];

	break;
	}
	}
	reader.readAsArrayBuffer(newBlock);

	reader.onload = function(evnt){
	var data_to_be_sent = { 'name' : file.name, 'block' : evnt.target.result };
	console.log('Sending -> ', data_to_be_sent);
	console.log(data_to_be_sent.block);
	socket.emit('upload', data_to_be_sent);
	}
	});
	socket.on('upload complete', function(data) {
	console.log('Upload completed -> ', data);
	});
	socket.on('upload error', function(data) {
	console.log('Upload error -> ', data);
	});
	socket.on('error', function(data) {
	console.log('Error:', data);
	$('.error').text('Error: '+ data);
	});
	socket.on('connect_error', function(data) {
	console.log('Error:', data);
	$('.error').text(data);
	});
	// ===========================================================================================================
	// ===========================================================================================================
	$('.disconnect').on('click', function(e) {
	if (socket.connected === true && socket.disconnected === false) {
	socket.disconnect();
	}
	});
	$('.connect').on('click', function(e) {
	if (socket.connected === false && socket.disconnected === true) {
	console.log('Connecting');
	socket.connect();
	} else {
	console.log('Already connected');
	}
	});
	$('.upload').on('click', function(e) {
	var uploadFiles = document.getElementById('js-upload-files').files;
	e.preventDefault()
	files = uploadFiles;
	for(var i = 0; i < uploadFiles.length; i++) {
	console.log('Start upload for', uploadFiles[i].name);
	socket.emit('start upload', {
	'name' : uploadFiles[i].name,
	'size' : uploadFiles[i].size
	});
	}
	});
	// ===========================================================================================================
	function updateUI(progress) {
	$('.progress-bar').attr('aria-valuenow', progress);
	$('.progress-bar').css('width', progress + '%')
	$('.sr-only').text(progress + '% complete');
	}
	});
	})(jQuery);
	</script>
	</head>
	<body>
	<div class="container">
	<div class="form-group">
	<label for="exampleInputEmail1">Server address</label>
	<input type="text" class="form-control" id="address" placeholder="Address">
	</div>
	<div class="panel panel-default">
	<div class="panel-heading">
	<strong>Upload Files</strong> <small>Bootstrap files upload</small>
	</div>
	<div class="panel-body">

	<!-- Standar Form -->
	<h4>Select files from your computer</h4>
	<form action="" id="js-upload-form">
	<div class="form-inline">
	<div class="form-group">
	<input type="file" name="files[]" id="js-upload-files" multiple>
	</div>
	</div>
	</form>

	<!-- Progress Bar -->
	<div>
	<h5>File 1</h5>
	<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
	<span class="sr-only">0% Complete</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="controls" style="text-align: center;">
	<button type="button" class="upload btn btn-primary">Test upload</button>
	<button type="button" class="connect btn btn-success">Connect</button>
	<button type="button" class="disconnect btn btn-danger">Disconnect</button>
	</div>
	<div class="messages" style="text-align:center;">
	<span class="error" style="color:red;font-size:20px;"></span>
	</div>
	</div> <!-- /container -->
	</body>
	</html>