1

I have some code in an Angular app that makes a GET request to a URL and saves the response data in a blob object. I've been asked to write similar functionality with jQuery.

After reviewing several posts on Stackoverflow, I wrote the following code:

jQuery.ajax({
    url: url,
    xhrFields: { responseType: "blob" },
    cache: false,
    xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.responseType = "blob";
        return xhr;
    },
    success: function(data) {
        // data contains the string "[Object blob]" instead of a blob representing the response
    };
});

I've carefully reviewed my code and compared it to the examples, and I can't understand why, but the data passed back to my success handler is the string "[Object blob]" instead of the actual object. It looks like somehow, a blob was generated from the result of the HTTP request, but it got converted to a string 13 characters long.

I've checked everything I can find, but I haven't been able to produce a blob in my development environment. What am I doing wrong?

I am using jQuery 3.3.1

Vivian River
  • 31,198
  • 62
  • 198
  • 313
  • Where are you actually doing something with `data`? How do you verify that it is the "[Object blob]" string? – Phil Oct 11 '21 at 22:36
  • @Phil I inspect it in the debugger and see that it is a string with 13 characters. The actual file downloaded is a JPG image, about 5 megabytes. – Vivian River Oct 11 '21 at 22:38
  • Cool, just checking. It's all too common for people to use `console.log("data: " + data)` and wonder why it's a string – Phil Oct 11 '21 at 22:39
  • 1
    You shouldn't need both `xhr` and `xhrFields`. – Phil Oct 11 '21 at 22:42
  • We tried something similar to the jQuery solution given, but we haven't tried the answer with vanilla Javascript, @Phil – Vivian River Oct 11 '21 at 22:49
  • @Phil Oddly enough, the vanilla Javascript solution worked perfectly the first time, but the jQuery solution does not work at all. – Vivian River Oct 12 '21 at 16:01

0 Answers0