CODEWITHSUNDEEP
javascripthtml
reticivis
reticivis

Reputation: 616

How to detect if a file exists in JavaScript accounting for 404 handler

In my website I am currently trying to write code to turn a link into a formatted attachment like this.

I am trying to write code to detect if the file exists

function doesFileExist(urlToFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', urlToFile, false);

  if (xhr.status == "404") {
    return false;
  } else {
    return true;
  }
}

alert(doesFileExist("http://hexbugman213.net/favicon.png"));

However, I noticed a problem. When the website has a 404 handler like .htaccess, and I try to test it with the file, it sees that the website didn't return a 404, and therefore still says it exists.

function doesFileExist(urlToFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', urlToFile, false);

  if (xhr.status == "404") {
    return false;
  } else {
    return true;
  }
}

alert(doesFileExist("http://hexbugman213.net/thisfiledoesntexist.mp3"));

Is there any way I can account for this and have it return "false" when the file doesn't exist even if there's a 404 handler?

Upvotes: 0

Views: 419

Answers (1)

thesun
thesun

Reputation: 110

You need to call the send() function on the XMLHttpRequest to make it actually make the request. See: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send

Also, you may run into cross origin issues depending on exactly what URL you're trying to retrieve and where you're hosting the page from. Mozilla has some documentation on the subject if you're not familiar with it: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Here is an improved version of your JavaScript that checks for exceptions and calls the send() function.

function doesFileExist(urlToFile) {
  try {
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send();

    alert(xhr.status)

    if (xhr.status !== 200) {
      return false;
    } else {
      return true;
    }
  } catch (e) {
    alert(e);
    return false;
  }
}

alert(doesFileExist("https://server.test-cors.org/server?enable=true&status=200&credentials=false"));
alert(doesFileExist("https://server.test-cors.org/server?enable=true&status=404&credentials=false"));
alert(doesFileExist("https://www.google.com/"));
alert(doesFileExist("http://hexbugman213.net/thisfiledoesntexist.mp3"));

The host: https://www.test-cors.org/ in the example is useful for testing CORS.

Upvotes: 1

Related Questions