wikit 13 Light Poster

Hi guys, thanks in advance for any help.
I'm using this tutorial Click Here To make a multi-file upload. the actual upload works just fine, however the % progress and final file list of uploaded files that is supposed to show at the end is not working.

Here is the upload page itself

<?php

if (!empty($_FILES['file'])){
    foreach($_FILES['file']['name'] as $key => $name){
        if ($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], "files/{$name}")){
            $uploaded[] = $name;
        }
    }

    if (!empty($_POST['ajax'])){
        die(json_encode($uploaded));
    }
}
?>
<html>
<head>
<title>Multi-file Upload</title>
<script type="text/javascript" src="upload.js"></script>
<style>
    #upload_progress {display: none;}
</style>
</head>
<body>
    <div id="uploaded">
        <?php
            if (!empty($uplaoded)){
                foreach ($uploaded as $name){
                    echo '<div><a href="files/', $name, '">', $name, '</a></div>';
                }
            }
        ?>
    </div>
    <div id="upload_progress"></div>
    <div>
        <form action="" method="post" enctype="multipart/form-data">
            <div>
                <input type="file" id="file" name="file[]" multiple="multiple"/>
                <input type="submit" id="submit" value="Upload" />


            </div>       
        </form>
    </div>
</body>
</html>

And here is the javascript it calls for...

var handleUpload = function(event){
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('file');

    var data = new FormData();

    data.append('ajax', true);

    for (var i = 0; i < fileInput.files.length; ++i){
        data.append('file[]', fileInput.files[i]);
    }

    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(event)}
        if (event.lengthComputable){
            var percent = event.loaded / event.total;
            var progress = document.getElementById('upload_progress');

            while (progress.hasChildNodes()){
                progress.removeChild(progress.firstChild);
            }

            progress.appendChild(document.createTextNode(Math.round(percent * 100) + ' %'));
        }
    });

    request.upload.addEventListener('load', function(event){
        document.getElementById('upload_progress').style.display = 'none';
    });

    request.upload.addEventListener('error', function(event){
        alert('Upload Failed');
    });

    request.addEventListener('readyStateChange', function(event){
        if (this.readyState == 4){
            if (this.status == 200)(
                var links = document.getElementByID('uploaded');
                var uploaded = eval(this.response);
                var div, a;

                for (var i = 0; i < uploaded.length; ++i){
                    div = document.createElement('div');
                    a = document.createElement('a');

                    a.setAttribute('href', 'files/' + uploaded[i]);
                    a.appendChild(document.createTextNode(uploaded[i]));

                    div.appendChild(a);
                    links.append.Child(div);
                }
            } else {

            )
        }
    });

    request.open('POST', 'upload.php');
    request.setRequestHeader('Cache-Control', 'no-cache');

    document.getElementById('upload_progress').style.display = 'block';

    request.send(data)'
}

window.addEventListener('load', function(event){
    var submit = document.getElementByID('submit');
    submit.addEventListener('click', handleUpload);
});

Can anyone help me figure out why it's not loading the progress text and final links. Thanks

P.S. I use Google Chrome and firefox (as a note for which browser i use to test this)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.