Is there a way of determining whether a blob URL points to something?

Currently working on a project where we get a bunch of image over AJAX. We do quite a lot of these, and it seems that IE11 seems to lose quite a few of them.

We get the image, call "URL.createObjectURL", get a valid URL, but by the next line, the image is gone. This works fine in other browsers, I'm assuming we're hitting some limit in IE.

Is there a nicer way of detecting if this URL is valid than trying to load it up?

Seems a little redundant to have to:

  • AJAX a file.
  • Get its address on the user's comp.
  • AJAX that address to make sure it's there.

Code:

var urlObj = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4) {
        active--;
        if (this.status == 200) {
            var blobUrl = urlObj.createObjectURL(new Blob([this.response], {type : 'image/jpeg'}));
            image.setSource(blobUrl); 
        }
    }
}
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.send();

So if you call this A LOT (with different URLs) - the blobUrl that we pass to setSource is a sensible looking object URL, but when you try and use it, you get an error. IE has either cleared up the memory, or lost the image or something. Bearing in mind we're not changing the page, losing the session, or revoking the blobUrl.

The only way I can think of to check if this has happened (i.e. that blobURL no longer points at anything), is to fire another AJAX request at the blobURL, and check it returns 200 etc.... Is there a better way? I'm imagining not.

I've "carved" this code-chunk from a larger block, so if there are any obvious mistakes there that's why. It works around 95% of the time. If I fire the AJAX "check" afterwards, and load the image again on a fail that fixes the issue.

Weird IE behaviour. Anyone else seen this?

More info: We're not using pdf.js, but same problem is reported here: https://connect.microsoft.com/IE/feedback/details/813485/resource-blob-not-found-when-using-url-createobjecturl-blob

Answers


This is (more or less) the check that we are using:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4){
        if (this.status == 200 || (this.response && this.response.type && this.response.type == "image/jpeg")) {
            success(blobUrl);
        }
        else {
            fail(blobUrl);
        }
    }
}
xhr.open('GET', blobUrl);
xhr.responseType = 'blob';
xhr.send();

Have to use that weird response.type check, because Firefox returns with status == 0.


Need Your Help

Facebook Video Upload OAuthExecption 200 Error

php facebook file-upload oauth

I have similar code to this (found at: Upload video to facebook with php-sdk graph api) in an application I wrote, but yesterday I started receiving the OAuthException error. I looked for a simple ...

insert BibTeX article *here*, not at the end of the article

bibtex

I've seen this before, but I just can't find it.