Adding callback to jquery .submit() to read error responses from uploads

Question

I've got an iframe #uploadTarget which I'm using for image uploads:

function uploadImage(){

    if ($('#imageUploader').val().length > 0){
        $('#uploadingIndicator').show();

        // set form params such that it uploads image
        $('#uploadForm').attr("action", uploadUrl);
        $('#uploadForm').attr("enctype", "multipart/form-data");
        $('#uploadForm').attr("target", 'uploadTarget');

        // submit for image upload
        $('#uploadForm').submit();
        resetFormAttributes();

        //console.log($('#uploadTarget').contents().find('body').text());

    } else {
        resetFormAttributes();
        $('#uploadForm').submit();
    }
}

When image upload is done, the page inside the iframe executes javascript which calls doneUploading outside the iframe.

In the event where the file is too big or an error occurred and an error page is displayed in the iframe, the doneUpload function is not called.

Is it possible to have some sort of a callback function that triggers after $('#uploadForm').submit() completed (in which case I'll read the page for error responses)?

If not, how would I read error responses being returned inside the iframe?

Are you using AJAX to do the submission? If so, you can use the AJAX callback function. Otherwise, I don't think there's a way. — Barmar
– Barmar, Commented Sep 17, 2013 at 21:42

theftprevention · Accepted Answer · 2013-09-17 22:37:05Z

1

Since you trigger the doneUploading() function when the upload succeeds, then you should trigger a failedUploading() function when the upload fails. The content of the iframe can be accessed through jQuery's contents() function.

function failedUploading() {
    var data = $('#uploadTarget').contents();
}

Edit

Or, you could attach a one-time load event listener to the iframe directly after submitting the form:

resetFormAttributes();
$('#uploadForm').submit();
$('#uploadTarget').one('load', function() {
    var data = $('#uploadTarget').contents();
});

edited Sep 17, 2013 at 22:37

answered Sep 17, 2013 at 21:51

theftprevention

5,2433 gold badges21 silver badges32 bronze badges

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

3 Comments

Ray Nicholus Over a year ago

You can attach a load event listener to an iframe.

theftprevention Over a year ago

I read that the implementation of load for iframes was a little finicky, but looking back, that mainly applies to when an iframe is being loaded at the same time as the parent document, so I suppose the listener would work here. I edited my answer; thanks!

Jan Vladimir Mostert Over a year ago

@theftprevention, the second one works perfectly, thank you very much!! I have no control over the error page since it's an external image service, only if it succeeds, can I call doneUploading, if it fails, everything just hangs as if the upload is still busy. $('#uploadTarget').one('load', function() { var data = $($('#uploadTarget').contents()).attr('title'); console.log(data);});

Collectives™ on Stack Overflow

Adding callback to jquery .submit() to read error responses from uploads

1 Answer 1

Edit

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related