title: Handling error messages when retrieving a blob via AJAX
body: <p><strong>How can I perform an AJAX call that may return a blob or a text string depending on the server's response?</strong></p>
  
  <p>I'm using AJAX to convert a user-supplied video to an audio blob (for use in an <code>&lt;audio&gt;</code> 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:</p>
  
  <pre><code>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').
  </code></pre>
  
  <p>Here's a simplified version of my current code:</p>
  
  <pre><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 &amp;&amp; request.status == 200) {
              console.log(typeof request.response); // should be a blob
          } else if(request.readyState == 4 &amp;&amp; request.responseText != "") {
              console.log(request.responseText);
          }
      };
      request.open("POST", "video_to_audio", true);
      request.responseType = "blob";
      request.send(form);
  }
  </code></pre>
  
  <p>I am using jQuery elsewhere in my code (so jQuery answers are acceptable), but as far as I know jQuery doesn't handle blobs.</p>