2

(I found some similar questions but none of them solved my problem so this is not a duplicated question I think)

I want to retrieve filenames in one of my folder using jQuery. I tried the following method but I still can't get each filename.

$.get(".", function(data) {
    $("#divID").append(data);
});

But I noticed that the type of 'data' is string and it contains filenames at the end of it like this:

<script>addRow("filename.csv","filename.csv",0,238618,"233 kB",1512119177,"12/1/17, 5:06:17 PM");</script>

So is there anyway I can retrieve the filenames from 'data'? (not by using regex)

Vito G.
  • 79
  • 1
  • 1
  • 8
  • I believe that you are trying to retrieve only the first filename.csv from the data parameter and not actually trying to read folder structure on your local file system. jQuery will not be able to access your local file system. Please add more details to your question. – Charanraj Golla Feb 06 '18 at 06:07
  • @CharanrajGolla I want to get all the filenames first and read those files then. I know how to get content of the file but not each of the filenames. – Vito G. Feb 06 '18 at 06:11
  • You can not read file from a remote server or local server using JavaScript on the client machine. You can use server side code to get the file details and send it across to the client via ajax but it will always be string containing details of the list. If you want content of the file then your JS will have to make a request to server to read the file and provide it's output which will again come as string. – Charanraj Golla Feb 06 '18 at 06:20
  • @CharanrajGolla what's the best practice to read filenames with server side code? – Vito G. Feb 06 '18 at 06:23
  • You can write a server side code say "Files/GetFile/" which will get list of all files and pass it across as JSON string. This can be used to displaying list of all files. If you need to display content of the file then make a second ajax request with the unique file identifier to server and read the content and return the string. This string can then be displayed under appropriate element on the page at client side – Charanraj Golla Feb 06 '18 at 06:28
  • Thanks all I think I'll just use regex to retrieve filenames from data. That's the easiest way IMO – Vito G. Feb 06 '18 at 07:14

1 Answers1

0

You cannot read files in a client's machine. You may access them for development purpose by modifying a flag. Look at my answer here regarding this. After this proceed with the below code.

Both works.

Using PURE JAVASCRIPT :

var filenames=[], foldernames=[];
var url = "file:///Users/Default/Downloads";
var req = new XMLHttpRequest();
req.open("GET",url,true);
req.onreadystatechange=function(){
    if(req.readyState === 4)
    {
        document.write(req.responseText);
        getNames();
    }
};
req.send();

function getNames()
{
    var files = document.querySelectorAll("a.icon.file");
    var folders = document.querySelectorAll("a.icon.dir");
    files.forEach(function(item){filenames.push(item.textContent)})
    folders.forEach(function(item){foldernames.push(item.textContent.slice(0,-1))})
    console.log(filenames);
    console.log(foldernames);
}

Using JQUERY :

var filenames=[], foldernames=[];

$.get("file:///Users/Default/Downloads",function(response){
    document.write(response);
    getNames();
});

function getNames()
{
    var files = document.querySelectorAll("a.icon.file");
    var folders = document.querySelectorAll("a.icon.dir");
    files.forEach(function(item){filenames.push(item.textContent)})
    folders.forEach(function(item){foldernames.push(item.textContent.slice(0,-1))})
    console.log(filenames);
    console.log(foldernames);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Vignesh Raja
  • 7,927
  • 1
  • 33
  • 42