Javascript - Retrieve names of files in a folder

Question

I have a requirement where I need to retrieve all the filenames from a folder in client side.

Hence I am trying to retrieve the names of the files in a folder using Jquery referring to this answer.

My code is as follows:

    <script>
        var fileExt = ".xml";

        $(document).ready(
        function(){
            $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: 'xml/',
            success: function (data) {
               $("#fileNames").html('<ul>');
               //List all xml file names in the page
               $(data).find('a:contains(" + fileExt + ")').each(function () {
                   var filename = this.href.replace(window.location, "").replace("http:///", "");
                   $("#fileNames").append( '<li>'+filename+'</li>');
               });
               $("#fileNames").append('</ul>');
             }     
            });
        });

    </script>

HTML code is as follows:

<div id="fileNames"></div>

But I get the following error when I run the code in chrome and firefox:

chrome: XMLHttpRequest cannot load file:///E:/Test/xml/. Received an invalid response. Origin 'null' is therefore not allowed access.

Firefox: ReferenceError: $ is not defined

I have tried googling a lot but the error is not resolved.

Your help would highly be appreciated.

Regarding this bit `Firefox: ReferenceError: $ is not defined` - are you absolutely sure that jQuery is loaded? — kalatabe, Mar 30 '15 at 07:35
Also, you cannot make AJAX requests to local file locations. You need to make the request to a web server, either running on your machine or remotely. — Rory McCrossan, Mar 30 '15 at 07:37
@Rory McCrossan: Good point.. Then to access local file locations is there any way out using javascript / any client side program. — iQuestProgrammer, Mar 30 '15 at 07:39
Check this out: http://stackoverflow.com/questions/371875/local-file-access-with-javascript or http://stackoverflow.com/questions/18251432/read-a-local-file-using-javascript-html5-file-api-offline-website or http://www.html5rocks.com/en/tutorials/file/dndfiles/ — choudhury smrutiranjan parida, Mar 30 '15 at 07:44

score 8 · Accepted Answer · answered Feb 18 '16 at 06:26

8

<html>
<body>
    <div id='fileNames'></div>
</body>
<script src="js/jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function () 
    {
        $.get(".", function(data) 
        {
            $("#fileNames").append(data);
        });
    })
</script>

this will print all the files in a folder on webpage.

answered Feb 18 '16 at 06:26

Bhushan Pawar

451
4
13

1

Simple enough but how do I set it to look in this path: "/content/images/" ? – dailyUnknown May 09 '16 at 05:37
2

You can use $.get("/content/images/", function(data) {}); to do so – Bhushan Pawar May 10 '16 at 11:44
Got it! Thank you. – dailyUnknown May 14 '16 at 02:36
1

this will return a 403 error when attempting to search for files on the client side. – prestonsmith Oct 20 '16 at 22:04
2

This seems a simple and accurate way to do it, but I can't find how to get proper filenames that i can store in array for example, because data is a complete html document... Could you please explain further ? – TOPKAT Nov 23 '16 at 04:16

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

It looks like you are running it by double clicking on html file. So it will run in browser with file protocol. You have to run it from server like http://localhost/myhtml.html.

I have tried code in my system, it's working with server.

Plus

you have syntax error in below line

$(data).find('a:contains(" + fileExt + ")').each(function () {

replace above with this

$(data).find("a:contains(" + fileExt + ")").each(function () {

I'm on ubuntu system, and with chrome browser, you do not need to replace location. because it is returning relative path to location.

UPDATE

Your final code should look like this

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
   var fileExt = ".xml";

        $(document).ready(function(){

            $.ajax({
                //This will retrieve the contents of the folder if the folder is configured as 'browsable'
                url: 'xml/',
                success: function (data) {
                    console.log(data);
                   $("#fileNames").html('<ul>');
                   //List all xml file names in the page

                    //var filename = this.href.replace(window.location, "").replace("http:///", "");
                   //$("#fileNames").append( '<li>'+filename+'</li>');

                    $(data).find("a:contains(" + fileExt + ")").each(function () {
                        $("#fileNames").append( '<li>'+$(this).text()+'</li>');
                    });
                    $("#fileNames").append('</ul>');
                }
            });

        });
});
//]]>
</script>

Javascript - Retrieve names of files in a folder

2 Answers2

Plus

UPDATE

Linked