Is it possible to execute an AJAX call that has the potential to return either a blob or a text string based on the server's response?
My current task involves using AJAX to transform a user-provided video into an audio blob that can be utilized within an <audio> tag. The conversion process is functioning properly, however, it is plausible that there could be issues with the video. In such scenarios, the server will respond with an HTTP status code of 500 along with an error message in plaintext format. In such situations, I require access to the plaintext response, but attempting to retrieve it using responseText triggers the following 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').
Below is a simplified version of my existing 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);
}
In other parts of my code, I am utilizing jQuery (therefore, jQuery solutions are acceptable). However, to the best of my knowledge, jQuery does not support blob handling.