Best practice to open a download link (as opposed to document.location)?

Question

I have a URL I know will usually open a file that the UA will download (with a content-disposition: attachment header), but sometimes will just result in a 500 or other error page.

Currently I am triggering the download by setting document.location in JavaScript.

I don’t want to open a new tab or page for this, but I also don’t want to have my users end up at a 500 page for no good reason on occasion.

Is there method to this that would address my concerns?

For example, creating an invisible <iframe> with the download URL as its source? I don’t want to invent something new, but rather am curious if anyone knows of a tried-and-true solution.

Why do they encounter the 500 intermittently? Is there any way to get rid of the 500 error? That seems like the most logical solution. You should prevent the user from going to the download page if you know it's going to cause an error, that would get around the issue altogether. — SoWeLie, Jan 25 '12 at 23:10
Not really possible, SoWeLie. Without getting into the details, at present, a third-party failure could cause the request to be impossible to serve successfully. — Alan H., Jan 25 '12 at 23:12
@Pointy have you used that technique “IRL”? Is it pretty reliable cross-browser (including on mobile)? — Alan H., Jan 25 '12 at 23:13
@AlanH. Yes posting a form to a hidden `` has been pretty commonplace for at least 10 years now. That said, your 500 errors really are a problem. Even using a 3rd-party component it should be possible to capture the errors so that you can report **something** useful back to the user. Otherwise they'll just sit there staring at the screen wondering what's going on. — Pointy, Jan 25 '12 at 23:17
...and that's what the seemingly pointless message "click here if it doesn't start" is good for — user123444555621, Jan 25 '12 at 23:30
@pointy, okay, good point… well if it’s happening in an iframe, I suppose I could intercept the error, display a sad message that I intend for no one to see (but just in case!), and then perhaps do a `postMessage` to `window.parent` informing my main window of the failed download, so my UI can react appropriately. — Alan H., Jan 25 '12 at 23:38
@Pointy If you want to submit these thoughts as a full-on answer, I would likely accept it. — Alan H., Jan 25 '12 at 23:50

score 0 · Answer 1 · answered Jan 25 '12 at 23:17

You could check to see if the URL exists before sending the user over by using an HTTP HEAD request

function CheckFileExists(url)
{
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open('HEAD', url, false);
  xmlhttp.send();

  //You may have to invert this to return true if not 500 || 404, this is up to you
  if(xmlhttp.status == 200)
  {
    return true;
  }
  else
  {
    alert('Sorry, that file does not exist');
    return false;

  }
}

Your hyperlinks could then be written like this

<a href="http://example.com/myfile.pdf" onclick="return CheckFileExists(this.href);">Download this file</a>

The disadvantage of this method is the delay that occurs between clicking and the initiation of the download.

If you're still going to redirect the users via JavaScript, you can redirect based on the value returned from CheckFileExists.

It exists (otherwise it would be a 404, not 500), it just sometimes errors on generation. — Alan H., Jan 25 '12 at 23:36

Best practice to open a download link (as opposed to document.location)?

1 Answers1