FineUploader OnComplete method not firing

callback, fine-uploader, json

Solution

Addressing the items in your question:

- 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.

- 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.

- 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.

- 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 + '">');
       }
   });                              

Problem

Original source