Question

I’m using fineuploader for uploading images to an ASP.NET 4.5 Web API controller. The controller is hit ok and the image is uploaded. I get a 200 response from the API controller. I’m displaying a thumbnail after successful upload and the filename to the location within Amazon S3 is supposed to come back in the JSON response. When I try this in Chrome or IE10 it works fine. When I try this in Firefox, the responseJson that comes back is an empty object, which is displayed as a failure. I’m using jQuery 1.8.2 and fineuploader 3.2. I actually get undefined displayed on the screen because responseJson.message is undefined. Here’s the js code:

(function ($) {
  $('#file-uploader').fineUploader({
    multiple: false,
    request: {
      endpoint: '/api/post-logo',
      forceMultipart: false
    },
    // other setup options removed for brevity
  }).on('complete', function (event, id, fileName, responseJson) {
    if (responseJson.success) {
      // for now, to illustrate the issue
      alert(responseJson.savefilename);
    } else {
      $('#file-uploader').after("<span class='field-validation-error'>" + responseJson.message + "</span>");
    }
  });
})(jQuery);

The response that comes back is application/json. What do I need to do to get this working properly in Firefox?

Answer 1

The difference between FF and Chrome is the Accept request header being sent. Just use FireBug and Chrome developer toolbar to compare the results between the 2 browsers:

FF:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Chrome:

Accept: */*

So as you can see FF is not sending the correct Accept header and the Web API’s content negotiation mechanism simply falls back to text/xml (because that’s what the client requested).

Fortunately the plugin allows you to override the request headers using the customHeader property and force it to the expected type (application/json in your case):

request: {
    endpoint: '/api/post-logo',
    forceMultipart: false,
    customHeaders: { Accept: 'application/json' }
},