使用iframe文件上传时，如何处理HTTP错误响应？

Question

I am using the following dirty workaround code to simulate an ajax file upload. This works fine, but when I set maxAllowedContentLength in web.config , my iframe loads 'normally' but with an error message as content:

dataAccess.submitAjaxPostFileRequest = function (completeFunction) {
    $("#userProfileForm").get(0).setAttribute("action", $.acme.resource.links.editProfilePictureUrl); 
    var hasUploaded = false;
    function uploadImageComplete() {
        if (hasUploaded === true) {
            return;
        }
        var responseObject = JSON.parse($("#upload_iframe").contents().find("pre")[0].innerText);
        completeFunction(responseObject);
        hasUploaded = true;
    }
    $("#upload_iframe").load(function() {
        uploadImageComplete();
    });
    $("#userProfileForm")[0].submit();
};

In my Chrome console, I can see

POST http:/acmeHost:57810/Profile/UploadProfilePicture/ 404 (Not Found)

I would much prefer to detect this error response in my code over the risky business of parsing the iframe content and guessing there was an error. For 'closer-to-home errors, I have code that sends a json response, but for maxAllowedContentLength`, IIS sends a 404.13 long before my code is ever hit.

Answer 1

There is not much you can do if you have no control over the error. If the submission target is in the same domain than the submitter and you are not limited by the SOP, you can try to access the content of the iframe and figure out if it is showing a success message or an error message. However, this is a very bad strategy.

Why an IFRAME? It is a pain.

If you want to upload files without the page flicking or transitioning, you can use the JS File API : File API File Upload - Read XMLHttpRequest in ASP.NET MVC

The support is very good: http://caniuse.com/#feat=filereader

For old browsers that does not support the File API just provide a normal form POST. Not pretty... but ok for old browsers.

UPDATE

Since there is no chance for you to use that API... Years ago I was in the same situation and the outcome was not straightforward. Basically, I created a upload ticket system where to upload a file you had to:

• create a ticket from POST /newupload/ , that would return a GUID.
• create an iframe to /newupload/dialog/<guid> that would show the file submission form pointing to POST /newupload/<guid>/file
• serve the upload status at GET /newupload/guid/status
• check from the submitter (the iframe outer container) the status of the upload every 500ms.
• when upload is started, hide the iframe or show something fancy like an endless progress bar.
• when the upload operation is completed of faulted, remove iframe and let the user know how it went.

When I moved to the FileReader API... was a good day.