# Checking If A File Exists
**URL:** https://forum.kirupa.com/t/checking-if-a-file-exists/399354
**Category:** programming
**Created:** [December 2, 2014, 2:06am UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354 "2014-12-02T02:06:39Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 2, 2014, 2:06am UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/1 "2014-12-02T02:06:40Z")
by [kirupa](http://www.kirupa.com/me/index.htm) | 8 November 2012
From images to stylesheets to script files, what you see in your HTML document often involves a collection of files that work together to display the final result:
* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/checking\_if\_a\_file\_exists.htm](http://www.kirupa.com/html5/checking_if_a_file_exists.htm)
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [May 15, 2017, 7:55pm UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/2 "2017-05-15T19:55:36Z")
Hi Kirupa!
I just noticed that sending an XMLHttpRequest with a “false” flag is now deprecated and is throwing lots of errors in my code. If I leave it out or set it to “true” the browser engine goes into an endless loop till it crashes.
Is there another way to check the existence of a file on the server without loading it?
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [May 15, 2017, 8:45pm UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/3 "2017-05-15T20:45:43Z")
Generally you want to avoid all blocking APIs in UI, such as in client-side browser code. This reference show examples of how to handle async XMLHttpRequest requests (when the false is true):
> **[Using XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)**
>
> To send an HTTP request, create an XMLHttpRequest object, open a URL, and send the request. After the transaction completes, the object will contain useful information such as the response body and the HTTP status of the result. This page outlines...
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [May 15, 2017, 10:55pm UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/4 "2017-05-15T22:55:55Z")
Thanks senocular, but that doesn’t really answer my question.
With some assistance from his lordship, the Rt Hon Kirupa, I built a function which iterates through a loop building an array of image names, without loading the actual images, by checking that they exist in the folder on the server. When it finds a 404 it breaks out of the loop and writes the matrix for the thumbnails to display in.
It uses the XMLHttpRequest to check the HEAD of the file on the server on each loop. This only works this way if the request is handled synchronously.
At this stage the function works perfectly and allows me to add images easily to the matrix without writing any new code. I just name them appropriately and stick them in the folder.
But if running the XMLHttpRequest synchronously in the main js thread is at some point going to stop working, I need to find another way to achieve the same result.
So far I have managed to get the site to do everything I want to using pure CSS3 and HTML5 with plain js. Which is pretty cool. No flash, no jquery or other plugins.
(still to build the mobile version)
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [May 16, 2017, 4:31pm UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/5 "2017-05-16T16:31:15Z")
The answer is in the link using event listeners/callbacks to handle the requests asynchronously instead of synchronously. If you want to have each image checked as a precondition for checking the next, it will require reworking the loop to instead recursively check in the complete handlers.
[https://jsfiddle.net/8tzxpr63/](https://jsfiddle.net/8tzxpr63/)
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [May 18, 2017, 11:14pm UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/6 "2017-05-18T23:14:43Z")
Thanks senocular! When I get a chance I will take a look and see how I can improve my code based on your fiddle. I have managed to get it error free apart from this across all the PC browsers! Hurrah!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 19, 2017, 11:08am UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/7 "2017-05-19T11:08:33Z")
Since @senocular picks on me for using xhr instead of Fetch, I figured I’d post a solution that uses the newer Fetch API instead 😛
```
fetch("https://www.kirupa.com/book/images/learning_react2.gif", {
method: "head",
mode: "no-cors"
})
.then(function(response) {
if (response.status == 200) {
console.log("file exists!");
} else {
console.log("file doesn't exist!");
}
return response.text();
})
.catch(function(error) {
console.log("Error ", error);
});
```
The result should be nearly identical!
Cheers,
Kirupa
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [May 19, 2017, 2:23pm UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/8 "2017-05-19T14:23:41Z")
Now write a version that loops over a list of images but stops loading any remaining image if one isn’t found 😀
(I dont know why I made my example do a type check 😝 )
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [May 21, 2017, 2:44pm UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/9 "2017-05-21T14:44:01Z")
> [@senocular](#):
>
> Now write a version that loops over a list of images but stops loading any remaining image if one isn’t found
No takers? I’ll put one up, this one using reduce:
```js
var files = [
"https://www.kirupa.com/book/images/learning_react.gif",
"https://www.kirupa.com/book/images/learning_react2.gif"
];
files.reduce((promise, file) =>
promise.then(() => fetch(file, {
method: "head",
mode: "no-cors"
}))
.then(response => {
if (response.status !== 200) {
throw "file doesn't exist!";
} else {
console.log("file exists!");
}
}), Promise.resolve())
.catch(function(error) {
console.log("Error ", error);
});
```
And if you want to get all cutting edge about it, here’s one with async iteration:
```js
async function* fetchImages (imgs) {
while (imgs.length) {
yield await fetch(imgs.shift(), {
method: "head",
mode: "no-cors"
});
}
}
async function checkImages (imgs) {
try {
for await (const response of fetchImages(imgs)) {
if (response.status === 200) {
console.log("file exists!");
} else {
throw "file doesn't exist!";
}
}
} catch (error) {
console.log("Error ", error);
}
}
checkImages([
"https://www.kirupa.com/book/images/learning_react.gif",
"https://www.kirupa.com/book/images/learning_react2.gif"
]);
```
---
### Author:  [@Ozyris](https://forum.kirupa.com/u/Ozyris)
#### Post date: [May 22, 2017, 9:30am UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/10 "2017-05-22T09:30:31Z")
I’m loving this one-upmanship! Very illuminating! Haven’t had the chance to change my page code yet - seems like a good thing! Now its up to you Kirupa to achieve the same thing with half as much code.
Looking forward to going through this and making use of it!
Thanks guys!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 19, 2020, 6:02am UTC](https://forum.kirupa.com/t/checking-if-a-file-exists/399354/11 "2020-01-19T06:02:17Z")
One thing that all of the solutions posted so far run into is CORS issues when trying to check for content on other domains/hosts than your own. Here is one approach using a CORS bypass proxy that solves that problem:
```
let CORS_override = "https://cors-anywhere.herokuapp.com/";
function doesFileExist(pathToFile) {
//
// Remove CORS_override from the 'fetch' call if you'll
// only be checking for files on your own domain
//
fetch(CORS_override + pathToFile)
.then(function (response) {
if (response.status != "404") {
console.log(pathToFile + " exists: " + response.statusText);
} else {
console.log(pathToFile + " does not exist: " + response.statusText);
}
})
.catch(function (error) {
console.log("Probably a network error!");
});
}
doesFileExist("https://www.kirupa.com/ssi/newDesign/kirupaLogo_large2.png");
doesFileExist("https://www.kirupa.com/ssi/newDesign/kirupaLogo_large.png");
```