Handling error messages when retrieving a blob via AJAX

Question

How can I perform an AJAX call that may return a blob or a text string depending on the server's response?

I'm using AJAX to convert a user-supplied video to an audio blob (for use in an <audio> tag). The conversion process works fine, but it's always possible that there could be something wrong with the video, in which case the server will return an HTTP status code of 500 with the error message in the response body as plaintext. In that case, I need the plaintext of the response, but trying to use responseText results in this error message:

Uncaught InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').

Here's a simplified version of my current code:

function convertToAudio(file) {
    var form = new FormData();
    form.append("Video", file, file.name);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200) {
            console.log(typeof request.response); // should be a blob
        } else if(request.readyState == 4 && request.responseText != "") {
            console.log(request.responseText);
        }
    };
    request.open("POST", "video_to_audio", true);
    request.responseType = "blob";
    request.send(form);
}

I am using jQuery elsewhere in my code (so jQuery answers are acceptable), but as far as I know jQuery doesn't handle blobs.

Answer 1

Set the responseType when the readyState is 2.

The responseType value can be changed at any time before the readyState reaches 3. When the readyState reaches 2, you have access to the response headers to make that decision with.

Updated sample code:

function convertToAudio(file) {
    var form = new FormData();
    form.append("Video", file, file.name);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if(request.readyState == 4) {
            if(request.status == 200) {
                console.log(typeof request.response); // should be a blob
            } else if(request.responseText != "") {
                console.log(request.responseText);
            }
        } else if(request.readyState == 2) {
            if(request.status == 200) {
                request.responseType = "blob";
            } else {
                request.responseType = "text";
            }
        }
    };
    request.open("POST", "video_to_audio", true);
    request.send(form);
}