The FineUploader OnComplete method does not work. Beginners need some hand hold

Question

So, I use FineUploader 3.3 in the MVC 4 application, and this is a very cool plugin that is worth the face value. Thanks for making this very helpful. Now I just need to make it work correctly.

I am new to MVC and absolutely new to JSON passing, so I need help getting this to work. Here is what I use, everything inside 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 used Internet Explorer 9, then switched to Chrome, Firefox, and I can download it just fine. What is needed for IE9? Validation does not work, regardless of browser.

The end point ends, and the file / parameters are filled, so it's all good! Validation does not prevent the user from choosing something outside of this list, but I can work with it for the time being. I can successfully save and do what I need to do with my boot, minus to run OnComplete. In fact, in IE I get the OPEN / SAVE dialog with what I have.

Question: are the parameters of the onComplete function (id, filename, responseJSON) populated with a return or an output? I'm just confused by this. Should my JSON have these parameters in it and populate it?

I do not do this (fill in these parameters), and my C # output method returns a JsonResult that looks like this: just return "success" (if necessary):

 return Json(new { success = true }); 

Do I need to add more? This line after saving occurs, and all I want to do is tell the user that everything is fine or not. Is the "success" property in my Json match the jSON.success response?

What am I missing or wrong? I am sure this will help others too, so I hope you take the time and help. I appreciate it! Thanks.

Answer 1

Addressing items in your question:

• Regarding the restrictions inside the Select Files dialog box, you should also set the acceptFiles check acceptFiles . See the validation section in the readme file for more information.
• The validation option property is in the wrong place. It should not be under the request property / property. The same applies to your text , multiple and callbacks / properties. Also, you are not properly setting your callbacks for the jQuery plugin.
• The open / save dialog in IE is caused by the fact that your server does not return a response with the correct "Content-Type" header. Your Content-Type response should be "text / plain". Read more at server side readme .
• Everything that the server returns in response will be handled by Fine Uploader using JSON.parse when processing the response on the client side. The result of calling JSON.parse on your server response will be passed as responseJSON to your onComplete callback handler. If you want to transfer specific information from your server to your client-side code, for example, some text that can be displayed on the client side, a new name for the downloaded file, etc., you can do this by adding the appropriate properties to your server. This data will then be available to you in your onComplete handler. If you don’t need it, you can simply return the “success” answer that you are returning now. On the server side of readme, with which I am connected, contains additional information about all this.

To clarify what I 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 + '">'); } });