joshuajames.delacruz 0 Junior Poster

Hi there I'm having a problem uploading my file with a progressbar.

the problems are

  1. i cannot upload any photos at all
  2. i cannot find/promt errors

here is my full codes:

this is for php

<?php
    if(!empty($_FILES['file'])){
                foreach ($_FILES['file']['name'] as $key => $value) {
                    $file = $_FILES['file']['name'];
                    $allowed = array('.jpg','.png','.gif');
                    $ext = substr($file, strpos($file, '.'), strlen($file)-1);
                    if(!in_array($ext, $allowed)){
                             echo 'File type not allowed';
                    }else{
                     if($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], "images/{$value}")){
                          $uploaded[] = $value;           
                       }
                    }               
                }
            }

    if(!empty($_POST['ajax'])){
        die(json_encode($uploaded));
    }

    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="upload.js"></script>
            <style>
                #upload_progress{
                    display: none;
                }
            </style>
            <title>File upload</title>
        </head>
        <body>

            <div id="uploaded">
            <?php
                if(!empty($uploaded)){
                    foreach ($uploaded as $value){
                        echo "<div><a href='images/".$value."'>".$value."</a></div>";
                    }
                }
            ?>
            </div>

            <div id="upload_progress"></div>

            <div id="contain_progress"  style="display:none; border:1px solid; width:300px; height:30px;">
                <div id="progress_bar"  style="border:1px solid; width:0px; height:25px; padding-top:3px; background-color:blue;"></div>
            </div>

            <div>

                <form  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>

this is for js

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

        var complete = 0;
        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");
                var prg_bar = document.getElementById("progress_bar");
                var cnt_prg_bar = document.getElementById("contain_progress");


                while(prg_bar.hasChildNodes()){
                        prg_bar.removeChild(prg_bar.firstChild);
                }   
                while(progress.hasChildNodes()){
                    progress.removeChild(progress.firstChild);
                }
                progress.appendChild(document.createTextNode(Math.round(percent * 100)+'%'));
                prg_bar.appendChild(document.getElementById('progress_bar').style.width = (Math.round(percent * 100) + "%"));            
            }
        });

        // upload function is here
        request.upload.addEventListener('load',function(){
            document.getElementById('upload_progress').style.display = 'block';
            document.getElementById('progress_bar').style.display = 'none';
            document.getElementById('contain_progress').style.display = 'none';

            // var c = confirm("Upload sucessful click here to continue");
            // if(c){
            //     window.location = "wala.php";
            // }else{
            //     alert("no");
            // }
        });

        request.upload.addEventListener('error',function(){ 
                 alert("upload failed");       
        });

        request.addEventListener('readystatechange', function(){
            if(this.readyState === 4){
                if(this.Status === 200){
                    var links = document.getElementById('uploaded');
                    console.log(this.response);
                    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);
                    }
                }
                else{
                    console.log('Server Replied with HTTP' + this.Status);
                }
            }
        });

        request.open("POST", "index.php");
        request.setRequestHeader("Cache-Control","no-cache");

        document.getElementById('upload_progress').style.display = 'block';
        document.getElementById('progress_bar').style.display = 'block';
        document.getElementById('contain_progress').style.display = 'block';
        request.send(data);
    //end of handleUpload
    };



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

Any help on this is highly appreciated