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

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.