How can I handle HTTP error responses when using an iframe file upload?

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-homeerrors, I have code that sends a json response, but formaxAllowedContentLength`, IIS sends a 404.13 long before my code is ever hit.

Community · Accepted Answer · 2017-05-23 12:28:26Z

0

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.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Dec 16, 2014 at 11:16

vtortola

36.1k33 gold badges169 silver badges270 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ProfK Over a year ago

I am coding for IE9! [gnashing teeth] and the whole project infrastructure is ajax and knockout based with otherwise strict MVVM modelling. To break just one upload into a vanilla post will be a headache.

ProfK Over a year ago

My current concern here is how can my browser detect a 404.13 error in the iframe, but I can't communicate it to me, except via the console. Surely there is some js I can use to access the browser's knowledge of this event?

vtortola Over a year ago

I doubt it, but please if you find a way post it here :)

ProfK Over a year ago

I have just resorted to a generic error if my iframe content isn't the expected json :-(

Collectives™ on Stack Overflow

How can I handle HTTP error responses when using an iframe file upload?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related