CODEWITHSUNDEEP
javascriptphpjqueryajaxhtml
PeterInvincible
PeterInvincible

Reputation: 2310

Ajax file upload - Error on server side

I am trying to implement ajax file upload via the HTML5 File API. It's based on Afzaal Ahmad Zeeshan's answer to this question.

I've basically copied the entire code that he wrote, but can't get it to work.

The main aim here is to be able to upload .xls and .xlsx files to the server to work with them later with PHPExcel.

Here's my HTML:

<form class="form-uploadXLS" method="post" action="php/uploadXLS.php" enctype="multipart/form-data">
    <div class="form-group">
        <div class="col-md-12">
            <input type="file" name="xls" class="xls" />
        </div>
    </div>
    <input type="button" value="Upload" class="btn-uploadXLS" />
</form>
<progress></progress>

And here are the jQuery event handlers, just like in the above mentioned answer:

File input onChange event:

$('.xls').on('change', function () {
    var file = this.files[0];
    var fileName = file.name;
    var fileType = file.type;
    var fileSize = file.size;

    console.log("file name: " + fileName + ", type: " + fileType + ", size: " + fileSize);
});

Upload button's onClick event:

$('.btn-uploadXLS').on('click', function (event) {
    event.preventDefault();
    console.log("Upload button clicked");
    var formData = new FormData($('.form-uploadXLS')[0]);

    $.ajax({
        url: 'php/uploadXLS.php', //Server script to process data
        type: 'POST',
        xhr: function () { // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: function (stuff) {
            console.log("BeforeSend");
            console.log(stuff);
        },
        success: function (data) {
            console.log("Success!");
            console.log(data);
        },
        error: function (error) {
            console.log("Error!");
            console.log(error);
        },
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});

Edit starts here:

And finally here's my PHP code that prints out the $_FILES array:

if(!empty($_FILES['xls'])) {
    echo '<pre>',print_r($_FILES,1),'</pre>';
}
else {
    die('POST ÜRES');
}

And here's the result:

Array
(
    [xls] => Array
        (
            [name] => 
            [type] => 
            [tmp_name] => 
            [error] => 4
            [size] => 0
        )

)

For some reason I can't access the error messages, it only contains the number 4.

What am I doing wrong?

Upvotes: 0

Views: 1849

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

For files you need

$_FILES['xls'] not $_POST

Read Handling file uploads

To get more info just print array 
echo '<pre>',print_r($_FILES,1),'</pre>'

Read php - file upload

Ajax File Upload with PHP, HTML5 File API and jQuery

Upvotes: 3

Related Questions