I am using dropzone.js to upload files via ajax but I need to implement a fallback method for older browsers that don't support XMLHttpRequest.
To work around this I'm using the jQuery Iframe Transport plugin
$.ajax({
url: "/File/Create",
type: 'POST',
cache: false,
data: { fallback: true },
files: $("form :file"),
iframe: true,
processData: false
}).complete(function (data) {
console.log(data.message);
});
As the jquery iframe transport does not have access to the HTTP headers of the server response, it is not as simple to make use of the automatic content type detection provided by jQuery as with regular XHR.
A workaround is to send back an HTML document containing just a <textarea>
element with a data-type attribute that specifies the MIME type, and put the actual payload in the textarea:
<textarea data-type="application/json">
{"ok": true, "message": "Thanks so much"}
</textarea>
So in my asp mvc controller I return the response as follows:
if (fallback == "true")
{
return Content("<textarea data-type=\"application/json\">{\"ok\": false, \"message\": \"Success.\"}</textarea>");
}
Which returns the following javascript object:
Object { readyState=4, responseText="{"ok": false, "message": "Success"}", responseJSON Object {ok=false, message="Success"}
How do I parse this response to output the Json message. The following gives me undefined?
.complete(function (data) {
console.log(data.message);
});