Blueimp jQuery File Upload plugin - “Empty file upload” result PHP

Question

Here\'s the plugin: https://github.com/blueimp/jQuery-File-Upload

I\'m having a problem getting the response I want from the plugin after uploading a file.

O

Answer 1

Since the version 5 of the plugin, the json response has changed: https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response

So you just have tweak your upload class with:

$filejson = new stdClass();
$filejson->files[] = $fileArray;
return json_encode($filejson);

And you're done

Answer 2

Your return needs to be enclosed in a files array, like this:

    {"files": [
      {
        "name": "picture1.jpg",
        "size": 902604,
        "url": "http:\/\/example.org\/files\/picture1.jpg",
        "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg",
        "deleteUrl": "http:\/\/example.org\/files\/picture1.jpg",
        "deleteType": "DELETE"
      },
      {
        "name": "picture2.jpg",
        "size": 841946,
        "url": "http:\/\/example.org\/files\/picture2.jpg",
        "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg",
        "deleteUrl": "http:\/\/example.org\/files\/picture2.jpg",
        "deleteType": "DELETE"
      }
    ]}

in particular, the requirement is: Note that the response should always be a JSON object containing a files array even if only one file is uploaded.

via :: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

Answer 3

The "Empty file upload result" will occur when adding HTML (and in programmatical result DOM) objects to the template that are outside of the <tr class="template-upload fade"> HTML tag, e.g.: let's say you add another <tr> to the template

This will result in the file(s) being uploaded correctly and for every uploaded file you will get the "Empty file upload result" once.

Seems to have to do something with the JS template engine.

This can be fixed in jquery.fileupload-ui,js, right after line 128

Original code:

    // Callback for successful uploads:
done: function (e, data) {
    var that = $(this).data('blueimp-fileupload') ||
            $(this).data('fileupload'),
        files = that._getFilesFromResponse(data),
        template,
        deferred;
    if (data.context) {
        data.context.each(function (index) { // LINE 128
            var file = files[index] ||
                    {error: 'Empty file upload result'},
                deferred = that._addFinishedDeferreds();

Add the following code after line 128:

if (!$(data.context[index]).hasClass(that.options.uploadTemplateId)) { return true; }

Resulting code:

    // Callback for successful uploads:
done: function (e, data) {
    var that = $(this).data('blueimp-fileupload') ||
            $(this).data('fileupload'),
        files = that._getFilesFromResponse(data),
        template,
        deferred;
    if (data.context) {
        data.context.each(function (index) { //LINE 128
            if (!$(data.context[index]).hasClass(that.options.uploadTemplateId)) { return true; } // YOUR ADDED LINE
            var file = files[index] ||
                    {error: 'Empty file upload result'},
                deferred = that._addFinishedDeferreds();

Hope this helps others :)

Answer 4

OK, this seems like it is not a jQuery problem, but rather a server-side issue. In my case it is a PHP script, which needed tweaking as follows.

See function post(), edit this line

$json = json_encode($info);

to

$json = json_encode(array($this->options['param_name'] =>$info));

and I had to also edit the echo at the last line of the function; instead of

echo $json;

there is now

echo str_replace('\/','/',$json);

It seems to work fine returning a correct json array. Hope it helps.

Answer 5

As mentioned before this happens because the server response is not what the plugin expects (which is a files array as shown here). If you don't (or cannot) want to change the backend, a solution is to replace the result object in the response with the result object the plugin expects (which then contains the files array).

This can be done in the fileuploaddone event.

Let's assume that this is the JSON response returned from the server once the upload is done:

data.result holds the server response:

.bind('fileuploaddone', function(e, data) {
    //this will now contains the server response 
    //as per the attached image: an array of elements
    data.result;
});

We want to replace the result object with a new one that can be parsed by the blueimp plugin, let's define it (note: this is an object that contains an array of files, as per the plugin docs).

//tempFolder is optional
var filesUploaded = { "files": [], "tempFolder": null };

Replacing the result object:

.bind('fileuploaddone', function(e, data) {
    //creating a file object in the format the jquery plugin is expecting
    var file = {
        deleteType: "DELETE",
        deleteUrl:"#",
        type: data.result[0].MimeType,
        thumbnailUrl : "#",
        url: "#",
        name: data.result[0].Name,
        size: data.result[0].Size
    }

    //adding it to the file list
    filesUploaded.files.push(file);
    data.result = null;
    //replacing the server response with the 'custom' one we just created
    data.result = filesUploaded;
});

The plugin should now render fine as it will be parsing the expected JSON schema and you won't get the "Empty file upload result" message anymore.

Answer 6

In my case I, i modified the jquery.fileupload-ui.js file to look for the JSON result directly.

Change this snippet

  if (data.context) {
                    data.context.each(function (index) {
                        var file = files[index] ||
                                {error: 'Empty file upload result'};//CHANGE
                        deferred = that._addFinishedDeferreds();
                        that._transition($(this)).done(
                            function () {

To This

  if (data.context) {
                    data.context.each(function (index) {
                        var file = data._response.result[index] ||
                                {error: 'Empty file upload result'};//TO THIS
                        deferred = that._addFinishedDeferreds();
                        that._transition($(this)).done(
                            function () {