2

I am hosting an apache server where I upload a website to, however it is very slow to deploy (and it is down for a week) so I like testing locally for development. It relies on external files, so I use a --allow-file-access-from-files tag on my google chrome in order for the JavaScript to run properly.

My problem is that I would like to check whether a file exists before opening in a new tab, and I am having trouble getting that working. I have tried this answer, which works, however it uses JQuery, which I would rather not use. The response in that SO question which doesn't use JQuery is a popular one in multiple questions, however it doesn't appear to work for me. My thought is that it doesn't work for me since it creates a XMLHttpRequest() which I don't think can access local files.

I know under normal circumstances doing this from JavaScript would be a breach of security and not allowed, however I've never had any problems for my testing ever since I added the --allow-file-access-from-files tag. Is this possible to do without using JQuery/ajax?

This code is currently working for me, however it uses JQuery

$.ajax({
    url:'test.pdf',
    type:'HEAD',
    error: function()
    {
        console.log("file doesn't exist");
    },
    success: function()
    {
        console.log("file exists");
    }
});

While this code does not work, using vanilla JS

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
if (UrlExists('test.pdf')) {
    console.log("file exists");
}
else {
    console.log("File doesn't exist");
}

the file test.pdf does not exist in the proper directory. The JQuery code outputs "file doesn't exist" while the JS code throws an error.

Mark R
  • 337
  • 2
  • 9
  • By *local* file, do you mean a file on the computer that is running Chrome? If so, how did the jQuery solution work for you, given that it checks whether a file on the server exists? –  Jul 24 '17 at 17:46
  • jQuery is just a JavaScript library. Of course, anything that jQuery is doing is possible to do in plain JS, but you'll be "reinventing the wheel". I think your problem lies accessing files directly on the filesystem and your requests are being blocked, check network tab to verify that. Why are you even accessing the files like that, why don't you set up a simple static server, e.g. [`http-server`](https://www.npmjs.com/package/http-server), and access the page via localhost:xxxx? – Marko Gresak Jul 24 '17 at 17:46
  • Sorry i need more context. Why do you need that custom tag for Google Chrome and why do you want to check if the file exist or not? maybe the solution is just another approach... – ayxos Jul 24 '17 at 17:46
  • I use that tag on my Google Chrome in order to access local files for other (unrelated) parts of my JavaScript. I assumed (perhaps incorrectly) that the tag would also have an effect on whether Chrome allows the JS to access other local files (to check whether they exist). I'm trying to access files like this so that it is easy to change the code from how it is being tested to being ready to deploy (currently I just change a variable which tells it to open a pdf from the server or a local directory) – Mark R Jul 24 '17 at 18:06
  • And by _local_ file, I mean it is a file stored in my C: disk. I'm a bit new to JQuery, so I'm not sure what the working code was doing exactly – Mark R Jul 24 '17 at 18:08
  • You need to show us the relevant bits of your code. Afaik, jQuery runs an `XMLHttpRequest` (since jQuery = JavaScript), so what works in jQuery also has to work with vanilla JS. –  Jul 24 '17 at 18:11
  • Edited to add relevant code @ChrisG – Mark R Jul 24 '17 at 18:25
  • So your actual problem all along has been a completely unrelated error, namely that you aren't wrapping `test.pdf` in quotes. Edit: you keep changing it... and what is the exact error message you're getting? –  Jul 24 '17 at 18:28
  • Oops! Just fixed that, and the error has changed but still persists. The error I'm getting is Failed to execute 'send' on 'XMLHttpRequest': Failed to load – Mark R Jul 24 '17 at 18:31
  • I was changing it as I changed the code to provide the exact code I am using to get that error – Mark R Jul 24 '17 at 18:32
  • Your jQuery code is asynchronous, your JS code isn't. That could be the issue. Also note that you aren't checking for a local file anywhere in that code. –  Jul 24 '17 at 18:33
  • @MarkR This should work: https://jsfiddle.net/q5jb687c/ –  Jul 24 '17 at 18:39
  • Hmmmmm resulting in net::ERR_FILE_NOT_FOUND for me @ChrisG. I suppose I'll just wait until I can deploy next week and test out that solution and the code I have up above on the actual server (and hope I never need to test modifications to that again!) – Mark R Jul 24 '17 at 18:46

0 Answers0