functions.js

function createStoredFilesTable(){
    var jsonObj;
    $.getJSON('/storedFilesList.json').done(function( obj ){ // loading external JSON file with info about stored files
        jsonObj = obj;
        $('#storedItemsTableWrapper').empty();

        storedItemsContent='<table class="table table-striped">\
                            <tr><th>File Name</th><th>Size (Bytes)</th><th>Expiration date</th><th colspan=\"2\"></th></tr>';

        $.each( obj, function(key, value){ // output: filename [object]
            storedItemsContent += '<tr><td class=\"textLeft\">' + key + '</td>';

            $.each( value, function( attr, val ){ // parsing '[object]'
                switch(attr){
                case 'path':
                    storedItemsContent += '<td><a href=\"/uploadedFiles/' + key + '\">Download</a></td>';
                    break;
                case 'expDate':
                    storedItemsContent += '<td><input class=\"inputDate\" type=\"date\"></input></td>';
                    break;
                default:
                    storedItemsContent += '<td>' + val + '</td>';
                }
            });

            storedItemsContent += '<td><a class=\"deleteLink\">Delete</a></td></tr>';
        });

        storedItemsContent += '</table>';
        $('#storedItemsTableWrapper').append(storedItemsContent);
    }).done(function(){

        $('.deleteLink').click(function(event){
            var filename = event.target.parentNode.parentNode.children[0].innerHTML;

            alert(filename);
            alert(jsonObj);
            delete jsonObj[filename];

            var formData = new FormData();
            formData.append('value','aaaa');

            var url = '/delete';

            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log('Delete OK.');
                    } else {
                        console.log('ERROR: ' + xhr.responseText + ' : ' + xhr.status);
                    }
                }
            };
            xhr.open('POST', url, true);
            xhr.send(formData);
        })

        $('.inputDate').change(function(event){
            alert('date changed');
        });
    });
}

function updateProgressBar( event, bar, backBar) {
    if ( event.lengthComputable ) {
        var completed = (event.loaded / event.total) * 100;

        backBar.style.display = 'block';

        bar.style.width = completed + "%";
        bar.innerHTML = parseInt(completed) + "%";

    } else {
        alert('Progress bar error!');
    }
}

/**
 * 1 interface 1 - drag&drop, 2 - upload by button
 *
 * Data below are all included in one parameter 'data'
 * 2 queue Queue for uploaded data - this macro uses synchronous upload
 * 3 formData Uploaded data - 'filepath', file, filename
 * 4 url Where to upload files
 * 5 $btn Upload button - only used by interface 2!
 * 6 uploadSuccess Div with success notice
 * 7 warning Div with warning notice
 * 8 progressBarWrapperArray divs containing progressBarArray and progressTitleArray - only used by interface1!
 * 9 progressBarArray Array containing progress bars
 * 10 progressTitleArray Array containing titles above progress bars - only used by interface 1!
 * 11 bar Colourful part of progress bar
 * 12 backBar Background part of progress bar
 * 13 progressTitle Title containing filename staying above progress bar
 */
function requestHandle( interface, data ) {

    //------------------------------------------//
    //--- GETTING DATA FROM 'data' PARAMETER ---//
    //------------------------------------------//
    var queue = data[0];
    var formData = data[1];
    var url = data[2];
    var $btn = data[3];
    var uploadSuccess = data[4];
    var warning = data[5];
    var progressBarWrapperArray = data[6];
    var progressBarArray = data[7];
    var progressTitleArray = data[8];
    var bar = data[9];
    var backBar = data[10];
    var progressTitle = data[11];

    if (interface != 1 && interface != 2) {
        alert('DEBUG: Unknown interface code!');
    }

    //alert(url);

    var req = new XMLHttpRequest();

    //------------------------//
    //--- WARNING MESSAGES ---//
    //------------------------//
    var noFileSelected = " You haven't selected any files to upload! ";
    var resourceNotFound = "Resource couldn\'t be found!";
    var internalServerError = "Internal server error!";

    //---------------------//
    // --- BIND LOADBAR ---//
    //---------------------//
    req.upload.onprogress = function(event) {
        updateProgressBar(event, bar, backBar)
    }

    req.onreadystatechange = function() {
        if (req.readyState == 4) {

            if (req.status == 200) {     // SUCCESS

                if (queue.length == 0) {
                    if (interface == 1) {      // drag drop interface
                        removeWrapperArray( progressBarWrapperArray );
                        document.getElementById("DragDropField").innerHTML = "Drag your attachments here";
                    } else {
                        $btn.button("reset");
                    }

                    hideProgressBarArray( progressBarArray );
                    uploadSuccess.style.display = 'block';
                }

            } else if (req.status == 404) {
                warning.innerHTML = resourceNotFound;
                warning.style.display = 'block';
            } else if (req.status == 500) {
                warning.innerHTML = internalServerError;
                warning.style.display = 'block';
            } else {
                warning.innerHTML = req.status + ' : ' + req.statusText;
                warning.style.display = 'block';
            }

           var newData = queue.shift();
           if( newData ) {
               requestHandle( interface, newData );
           } else {
               activeUploading = false;
           }
        }
    }

    req.open('POST', url, true);
    req.send(formData);
}

function removeWrapperArray( wrapperArray ) {
    var len = wrapperArray.length;
    for( var i = 0; i < len ; i++ ) {
        wrapperArray[0].remove();
    }
}

function switchInterface() {
    document.getElementById("DragDrop").style.display = 'none';
    document.getElementById("UploadButton").style.display = 'block';
}

function hideProgressBarArray( progressBarArray ) {
    var len = progressBarArray .length;
    for( var i = 0; i < len ; i++ ) {
        progressBarArray [i].style.display = 'none';
    }
}