Uncaught SyntaxError: Unexpected token < (anonymous function) on console

Question

I am creating an upload file application. I wrote it using AJAX and PHP.

It is working fine on the localhost but when I uploaded it to my web server. It returns the error:

Uncaught SyntaxError: Unexpected token <

It is pointing to the line

uploaded = JSON.parse(this.response);

This line is in my upload.js script file

upload.js

var app = app || {};
(function (obj) {
"use stricts;"
var ajax, getFormData, setProgress;
ajax = function(data){
    var xmlhttp = new XMLHttpRequest(), uploaded;
    xmlhttp.addEventListener('readystatechange', function(){
        if (this.readyState === 4) {
            if (this.status === 200) {
                uploaded = JSON.parse(this.response);
                if (typeof obj.options.finished === 'function') {
                    obj.options.finished(uploaded);
                }
            }else{
                if (typeof obj.options.error === 'function') {
                    obj.options.error();
                }
            }
        }
    });
    xmlhttp.upload.addEventListener('progress',function(){
        var percent;

        if (event.lengthComputable === true) {
            percent = Math.round((event.loaded / event.total) * 100);
            setProgress(percent);
        }
    });

    xmlhttp.open('post', obj.options.processor);
    xmlhttp.send(data);

};

getFormData = function(source){
    var data = new FormData(), i;

    for(i=0; i<source.length; i = i+1){
        data.append('file[]',source[i]);
    }
    data.append('ajax', true);
    return data;
};

setProgress = function (value){
    if (obj.options.progressBar !== undefined) {
        obj.options.progressBar.style.width = value ? value + '%': 0;
    }

    if (obj.options.progressText !== undefined) {
        obj.options.progressText.innerText = value ? value + '%' : 0; 
    }
};

obj.uploader = function(options){
    obj.options = options;

    if (obj.options.files !== undefined) {
        ajax(getFormData(obj.options.files.files));
    }
}
}(app));

Here are the other codes for reference

upload.php

 <?php
 header('Content-Type: application/JSON');
 $uploaded = [];
 $allowed = ['jpg'];
 $succeeded = [];
 $failed = [];
 if (!empty($_FILES['file'])) {

 foreach ($_FILES['file']['name'] as $key => $name) {

    if($_FILES['file']['error'][$key] === 0){
        $temp = $_FILES['file']['tmp_name'][$key];
        $ext = explode('.', $name);
        $ext = strtolower(end($ext));

        $file = md5_file($temp) . time() .'.'.$ext;

        if (in_array($ext,$allowed) === true && move_uploaded_file($temp, "uploads/{$file}") === true) {
                $succeeded [] = array('name' => $name, 'file' => $file);

            # code...
        }else{
            $failed[] = array('name' => $name );
        }

    }else{

        echo "Error";
    }
}
}

if (!empty($_POST['ajax'])) {
echo json_encode(array(
'succeeded' => $succeeded, 
'failed' =>$failed
));
}
?>

and here's my html form

index.php

<form action="upload.php" method="post" enctype="multipart/form-data" id="upload" class="upload">
    <fieldset>
        <legend>Upload Files</legend>
        <input type="file" id="file" name="file[]" required multiple>
        <input type="button" id="submit" value="Upload">
    </fieldset>
    <div class="bar">
        <span class="barfill" id="pb"><span class="barfilltext" id="pt">40%</span></span>
    </div>
    <div id="uploads" class="uploads">

    </div>
    <script type="text/javascript" src="upload.js"></script>

    <script type="text/javascript">
        document.getElementById('submit').addEventListener('click', function(e){
                e.preventDefault();
            var f = document.getElementById('file'),
                pb = document.getElementById('pb'),
                pt = document.getElementById('pt');

                    app.uploader({
                    files:f,
                    progressBar:pb,
                    progressText:pt,
                    processor: 'upload.php',

                    finished: function(data){
                        var uploads = document.getElementById('uploads'),
                            succeeded = document.createElement('div'),
                            failed = document.createElement('div'), anchor, span, x;

                            if (data.failed.length) {
                                failed.innerHTML = '<p>The following files failed to upload</p>'
                            }
                            uploads.innerText = '' ;
                                anchor = document.createElement('p');
                                anchor.innerText = "Upload Completed!";
                                anchor.target = '_blank';
                                succeeded.appendChild(anchor);
                            for(x=0;x<data.failed.length; x=x+1){
                                span = document.createElement('span');
                                span.innerText = data.failed[x].name;
                                failed.appendChild(span);   
                            }
                            uploads.appendChild(succeeded);
                            uploads.appendChild(failed);
                    },
                    error: function (){
                        console.log("Error");
                    }
                });
            });
    </script>
</form>

This code works on the localhost. It is uploading the files to my localhost server and shows the loading progressbar.

But when I deploy this to my web server it shows the progressbar loading slowly until it reaches 100%. But when I look into the uploads directory in my server nothing was uploaded.

Answer 1

you have a missing } at the end of the code in upload.php, before the php end ( ?> ):

'failed' =>$failed
));
}
}
?>