Validate if a file exists with JavaScript

Question

Good day. I need to know if the file that I indicate in the path that I save in the text variable "t" as the slide variable "s" exist, in order to be able to show them or not through the view. I need to do this with only java script and local files, no server side. If possible, I would be very grateful to receive your help.

My current code in JavaScript:

function loadFiles(num) {

    let s = 'assets/content/Compiladores/Slides/' + num + '.jpg';
    let t = 'assets/content/Compiladores/Texts/' + num + '.txt';
    
    document.slider.src = s;
    $("#description").load(t);
    $("#num").text(num);

}

Check the onerror event.

Schokokuchen Bäcker
– Schokokuchen Bäcker

2022-05-11 17:24:16 +00:00
Commented May 11, 2022 at 17:24 — Schokokuchen Bäcker
– Schokokuchen Bäcker, Commented May 11, 2022 at 17:24

Jared Smith · Accepted Answer · 2022-05-12 12:39:11Z

You are never going to be able to reliably determine if a resource exists before doing something with it.

Note that this holds true even on a program that runs directly on a user's machine or a server. I don't normally mention other people's answers in my own, but the one advocating that you do that check (which per the link is problematic even in the best of circumstances) but across a client-server gap is sheer folly. Think about all the things that can go wrong:

The server could have moved the resource between the time you check and the time you set it.
Another thread or even entire other program could have acquired a lock on the resource causing your request to either take a lot of extra time or fail outright.
The user could be on a mobile connection and lost signal between the time of the check and the time of the resource request.
If you're passing an authentication token the user's session could expire between the time of the check and the time of the actual request.
The server could crash between the first request and the second.
The second request could be load-balanced to a different server than the first request.
The entire network for a major service could go down between the requests. Yes, really.

And so on.

Not to mention that for the happy path it involves a completely unnecessary extra round trip to the server before you start showing them the thing you wanted to show them in the first place!

The correct way to do this is to attempt to load the resource and then just handle the error if it fails:

function loadFiles(num) {

    let s = 'assets/content/Compiladores/Slides/' + num + '.jpg';
    let t = 'assets/content/Compiladores/Texts/' + num + '.txt';
    
    document.slider.onerror = function () {
       // deal with the resource not loading here
    }
    document.slider.src = s;
    const desc = $("#description");
    desc.on("error" function () {
       // deal with the resource not loading here
    });
    desc.load(t);
    $("#num").text(num);

}

Mohammad Ali Rony · Accepted Answer · 2022-05-11 17:27:45Z

1

try this for the file exists or not

 function UrlExists(url)
 {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
 }

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

function loadFiles(num) {

    let s = 'assets/content/Compiladores/Slides/' + num + '.jpg';
    let t = 'assets/content/Compiladores/Texts/' + num + '.txt';
    
    document.slider.src = s;
    if(UrlExists(s)){
       $("#description").load(t);
    }
    if(UrlExists(t)){
       $("#num").text(num);
    }

}

answered May 11, 2022 at 17:27

Mohammad Ali Rony

4,9413 gold badges23 silver badges36 bronze badges

2 Comments

Mohammad Ali Rony Over a year ago

@Yeom Mark as answer if it useful

Jared Smith Over a year ago

Checking if a file exists before doing something with it is a well-known antipattern, even in programs running directly on a machine, and you're advocating doing the same thing but across a client-server gap, with no error handling!?!? -1

Collectives™ on Stack Overflow

Validate if a file exists with JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related