javascriptjqueryajaxfile-uploadvalums-file-uploader

Valums FileUploader no response from server after upload


I am using Valums FileUploader and I am having trouble getting and reading a response after a file is uploaded. Basically I am trying to get a useful response to be used in onComplete, whether that be success or an error message.

I found another post here that said perhaps the server needs to be set to content-type plain/text. I checked that, and indeed that is the setting.

Anyway, been doing a lot of searching and finding various things to check, but nothing yet seems to solve my problem.

Here is some abbreviated code from the uploader:

var uploader = new qq.FileUploaderBasic({

    button: document.getElementById('btnUpChange'),
    action: templateURL+'/upload.php',  
    allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],

    onSubmit: function(id, fileName) {

       },

    onComplete: function(id, fileName, responseJSON) {

        var fileMsg = responseJSON;

        console.log(fileMsg);

        $('#filemsg').html('<span class="red" >'+fileMsg+'</span>');
        }
    });

And here is the text from the console after upload:

"[uploader] xhr - server response received" 
"[uploader] responseText = File is too large"
[object Object]

I intentionally set the $sizeLimit small to throw an error just to try and get a message.

I took the php.php file included in the uploader zip, copied and renamed it, then added at the end this:

$allowedExtensions = array('jpg', 'jpeg', 'png', 'gif');
$sizeLimit = 4 * 1024;

$uploader = new qqFileUploader($allowedExtensions, $sizeLimit);

// Call handleUpload() with the name of the folder, relative to PHP's getcwd()
$result = $uploader->handleUpload('uploads/', $replaceOldFile = true);

if ($result['success'] !== true) {
    echo $result['error'];
} else {
    echo $result['success'];
}

If the upload is successful, I just get a 1 returned to the onComplete method. I tried to use responseJSON.responseText and all I got was "undefined".

Thank you for your help.


Solution

  • Found the solution to this...

    First, on the php.php I put at the end this code:

    echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);
    

    Then, in the onComplete function the JSON response can be returned like this:

    onComplete: function(id, fileName, responseJSON) {
    
        var newFile = responseJSON.filename;
        var theError = responseJSON.error;
    
    }
    

    where the key name from the response array created in the php.php can be anything you want and is returned as in the example like this: responseJSON.keyname