17

I've integrated JQuery File Upload into a Java Spring application. The returned JSON is generated from an array of Picture, where Picture contains "name", "size", "url", "thumbnail_url", "delete_url" and "delete_type".

Sometimes I decide to not accept the upload on the server, to reject it, because of missing pre-conditions, so I would like to inform inform the user about it, by returning to the client an error message.

I know it's possible to return an error message and an error code to the File Upload plugin, but I can't find it in the documentation. I suppose that I've to add two fields similar to "error_message" and "error_code".

Where can I find this documentation or what are the field names that I should return.

stivlo
  • 83,644
  • 31
  • 142
  • 199
  • Did you try listening to the "fail" event ? – Esailija Nov 11 '11 at 17:19
  • @Esailija, I rephrased the second sentence to be more clear. I decide on the server to make it fail, the server knows why it failed, the client doesn't, I have to inform the user about it, how do I do it? – stivlo Nov 11 '11 at 17:26
  • Oh, well how I have done it is to return JSON with error property set to true and error msg and such properties set. I check for the error property in a success callback and if it's true I inform of the error. Never used this plugin so maybe it doesn't apply or ? – Esailija Nov 11 '11 at 17:39
  • @Esailija, yes that is the principle, however the response is managed by the plugin, so I have to use its conventions not mine – stivlo Nov 11 '11 at 17:46
  • By looking at source code the plugin itself doesn't check the server response at all for fields to throw error, it just thinks everything is success if the upload completes and server responds. But it calls the "done" callback with the response when that happens, can't you use the "done" event to see if there is your error field? – Esailija Nov 11 '11 at 17:52
  • I was [looking here](https://github.com/blueimp/jQuery-File-Upload/blob/master/jquery.fileupload-ui.js) and I think it could be "error", I'm trying, will update. – stivlo Nov 11 '11 at 17:55
  • @Esailija I can't use events from the server! You're thinking from a JavaScript perspective, but this is data that I've to send from Java – stivlo Nov 11 '11 at 18:02
  • I didn't mean sending events from server but a JSON object with error property. Though it seems you have it working now :) I wasn't looking at the UI source code at all, I didn't think that was relevant but apparently it was :P – Esailija Nov 11 '11 at 18:15

3 Answers3

23

You can use data.jqXHR.responseText

Like this:

fail: function(e, data){
    console.log(data.jqXHR.responseText);
},
Lazaro Fernandes Lima Suleiman
  • 1,772
  • 18
  • 30
  • 1
    This will trigger only if HTTP server returns an error response. This doesn't include returning "error" property from upload handler script inside json. – Vladislav Rastrusny Oct 07 '14 at 11:32
  • This won't be called if the server returns a 200 OK. It will be called if the server returns an error code (ie - 500). In this case, the OP is failing it at the server, returning a 200 OK, therefore it needs to be parsed in the done handler. – Pete - MSFT Sep 07 '17 at 22:33
15

By looking at the source code (the ultimate documentation), I found out that File Upload checks an "error" field and displays that error. I tried and it works, my error gets displayed.

The JSON response is an array of Objects, one per file uploaded. In case of error, don't fill URLs and size. The important properties are the error and name and size, that will be displayed to the user.

[ 
    {
        "error": "Image must be in JPG format",
        "url": "", 
        "thumbnail_url": "", 
        "delete_url": "", 
        "delete_type": "DELETE", 
        "name": "broken_image.jpg", 
        "size": 78191
     }
]
stivlo
  • 83,644
  • 31
  • 142
  • 199
  • 4
    When returning an error message in the JSON the message will be overwitten if the server returns an error status code. For example if the server returns a 403 the error message will be overwritten with "Forbidden". To make sure the error message from the JSON is used be sure to return a successful status code from the server. – JamieD Nov 14 '12 at 11:43
  • 2
    The problem is the plugin does not return this json but some useless chunk of data like File lastModified : 1167905588000 lastModifiedDate : Thu Jan 04 2007 04:13:08 GMT-0600 (Hora estándar del Centro) name : "000_0001.JPG" size : 971424 type : "image/jpeg" webkitRelativePath : "" – Allfarid Morales García Jul 11 '16 at 23:53
1
done: function (e, data){
    var files = data.jqXHR.responseJSON.files;
    console.log(files);
}),

Each "files" object can have an error var you can work with, like user stivlo said.

Allfarid Morales García
  • 1,455
  • 2
  • 17
  • 27