FineUploader OnComplete method not firing

Question

So, I'm using FineUploader 3.3 within a MVC 4 application, and this is a very cool plugin, well worth the nominal cost. Now, I just need to get it working correctly.

I'm pretty new to MVC and absolutely new to passing back JSON, so I need some help getting this to work. Here's what I'm using, all within doc.ready.

var manualuploader = $('#files-upload').fineUploader({
request:
{
    endpoint: '@Url.Action("UploadFile", "Survey")',
    customHeaders: { Accept: 'application/json' },
    params: {
        //variables are populated outside of this code snippet
        surveyInstanceId: (function () { return instance; }),
        surveyItemResultId: (function () { return surveyItemResultId; }),
        itemId: (function () { return itemId; }),
        imageLoopCounter: (function () { return counter++; })
    },
    validation: {
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp']
    },
    multiple: true,
    text: {
        uploadButton: '<i class="icon-plus icon-white"></i>Drop or Select Files'
    },                              
    callbacks: {
        onComplete: function(id, fileName, responseJSON) {
            alert("Success: " + responseJSON.success);
            if (responseJSON.success) {
                $('#files-upload').append('<img src="img/success.jpg" alt="' + fileName + '">');
                }
            }
    }
}

EDIT: I had been using Internet Explorer 9, then switched to Chrome, Firefox and I can upload just fine. What's required for IE9? Validation doesn't work, regardless of browser.

Endpoint fires, and file/parameters are populated, so this is all good! Validation doesn't stop a user from selecting something outside of this list, but I can work with this for the time being. I can successfully save and do what I need to do with my upload, minus getting the OnComplete to fire. Actually, in IE, I get an OPEN/SAVE dialog with what I have currently.

Question: Are the function parameters in onComplete (id, filename, responseJSON) getting populated by the return or on the way out? I'm just confused about this. Does my JSON have to have these parameters in it, and populated?

I don't do this (populate those parameters), and my output method in C# returns JsonResult looking like this, just returning 'success' (if appropriate):

return Json(new { success = true });  

Do I need to add more? This line is after the saving takes place, and all I want to do is tell the user all is good or not. Does the success property in my JSON match up with the responseJSON.success?

What am I missing, or have wrong?

Answer 1

Addressing the items in your question:

1. Regarding restrictions inside of the "select files" dialog, you must also set the acceptFiles validation option. See the validation option section in the readme for more details.
2. Your validation option property in the wrong place. It should not be under the request property/option. The same is true for your text, multiple, and callbacks options/properties. Also, you are not setting your callbacks correctly for the jQuery plug-in.
3. The open/save dialog in IE is caused by your server not returning a response with the correct "Content-Type" header. Your response's Content-Type should be "text/plain". See the server-side readme for more details.
4. Anything your server returns in it's response will be parsed by Fine Uploader using JSON.parse when handling the response client-side. The result of invoking JSON.parse on your server's response will be passed as the responseJSON parameter to your onComplete callback handler. If you want to pass specific information from your server to your client-side code, such as some text you may want to display client-side, the new name of the uploaded file, etc, you can do so by adding appropriate properties to your server response. This data will then be made available to you in your onComplete handler. If you don't have any need for this, you can simply return the "success" response you are currently returning. The server-side readme, which I have linked to, provides more information about all of this.

To clarify what I have said in #2, your code should look like this:

$('#files-upload').fineUploader({
   request: {
       endpoint: '@Url.Action("UploadFile", "Survey")',
       customHeaders: { Accept: 'application/json' },
       params: {
           //variables are populated outside of this code snippet
           surveyInstanceId: (function () { return instance; }),
           surveyItemResultId: (function () { return surveyItemResultId; }),
           itemId: (function () { return itemId; }),
           imageLoopCounter: (function () { return counter++; })
       }
   },
   validation: {
       allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp']
   },
   text: {
       uploadButton: '<i class="icon-plus icon-white"></i>Drop or Select Files'
   }
})
   .on('complete', function(event, id, fileName, responseJSON) {
       alert("Success: " + responseJSON.success);
       if (responseJSON.success) {
          $('#files-upload').append('<img src="img/success.jpg" alt="' + fileName + '">');
       }
   });