2

I have created a bunch of local HTML files and I'm trying to translate them thanks to xml files and a lot of JavaScript/JQuery. The translation part is done and I'm now trying to do a pulldown menu with all of the xml files to select the desired language.

First, I tried to scan a local folder named "images" and print the name of my files in a blank html page but I was not able to do it. I did a lot of research on stack overflow and on forum.jquery.com but even if I tried a lot of things, nothing worked.

Here is what I pulled of for the moment :

HTML side : 

<body>
    <div id="fileNames">
        <p></p>
    </div>
    <script>window.onload=ChangeLangue</script>
</body>

JS/Jquery side :

var folder = "images/";
$.ajax({
    url: folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if (val.match(/\.(jpe?g|png|gif)$/)) {
                $("body").append("<img src='" + folder + val + "'>");
            }
        });
    }
});

What am I doing wrong? Is this possible?

frontendzzzguy
  • 3,242
  • 21
  • 31
Alex
  • 109
  • 2
  • 9
  • 2
    When you say 'local' do you mean on the client machine? If so that's not possible. Browser security prevents access to the local file system - and for very good reason. – Rory McCrossan Jan 03 '18 at 15:53
  • I meant on my own computer, not on a network. – Alex Jan 03 '18 at 15:55
  • Still the same. The browser does not allow JS to access the local file system. If it did I would already have access to all the files on your computer ;) – Rory McCrossan Jan 03 '18 at 15:57
  • Damn :( Thanks for the fast answer ! – Alex Jan 03 '18 at 15:57
  • You can use an input of type file but that requires user interaction, a click for instance – A. Wolff Jan 03 '18 at 16:00
  • I'm trying to do so: it scan the folder automatically, search for xml files "en-us.xml" for exemple and then display the name of the file on the screen. And all of that without an human intervention – Alex Jan 03 '18 at 16:05
  • @Alex But that's of course not possible! – A. Wolff Jan 03 '18 at 16:11

1 Answers1

2

Browsers don't allow cross origin requests. An error will be thrown as Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Because the protocol is file://

You can do it by setting a flag:

  1. Quit Chrome.

  2. Restart using following command.

MAC : In terminal, open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

WINDOWS : In Run, C:/PATH_TO_CHROME_INSTALLATION_FOLDER/chrome.exe --allow-file-access-from-files

Now you can access the files from your computer. To verify it, you can go to chrome://version and you can see the flag enabled under the Command Line section.

As you have var folder="images/", and suppose the page loaded in the browser is in /Users/Default/Desktop folder, the ajax request made will be

file:///Users/Default/Desktop/images

If you add / before the folder var folder = "/images/", the request will be file:///images/.

Make sure to provide the required/complete path.

After getting the response, since the response is in html format, you can use document.write(response). From there you can view and navigate in/out of folders.

I tried with below JS Code and got the result.

<script type="application/javascript">
    var url = "/Users/Default/Downloads";
    var req = new XMLHttpRequest();
    req.open("GET",url,true);
    req.onreadystatechange=function(){
        if(req.readyState === 4)
        {
            document.write(req.responseText);
        }
    };
    req.send();
</script>

P.S. : No idea if it works in Windows machines. Correct me if I am wrong. TIA.

Vignesh Raja
  • 7,927
  • 1
  • 33
  • 42
  • The problem you explained is exactly what's happening. I tried your solution but the command don't seems to work on windows. Thanks for your help, I will find another way to do this! – Alex Jan 04 '18 at 07:22
  • Quit all chrome instances, go to Run and execute the command - **chrome.exe --allow-file-access-from-file**. This works I think so. Not tested just Googled. – Vignesh Raja Jan 04 '18 at 08:27
  • Yes that what i tried but i get the same error ("Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."). It seems that using firefox for windows don't bring up this error, because all of the HTML page i did work fine with firefox but not with Chrome (I was using firefox since the start). Your JS is a good start i will continue with it. Thanks for your help – Alex Jan 04 '18 at 08:48