How can I make a webpage that checks my server for a folder and counts the number of folders under that

Question

I want to use a html webpage to look on it's source server to a specific subfolder (/home/pi/Pictures) and then count the number of subfolders there and print that out on the page when viewed remotely on the LAN. The source server is a Raspberry Pi, the software has .net6, and is mostly written in c#, with some js, css.

I've found a lot of old (and conflicting) answers to parts of the whole, so what do i need to do this in June 2022, on current browsers?

Answer 1

This seems like two topics in one, one of them JS and the other C#, since your files are on a server and your server code is in C#. The actual counting of directories in C# is simple, just using syntax like string[] folders = Directory.GetDirectories("path"); and then return folders.Length; . Of course you want to make sure that the path can't be provided by the user, since that's a security risk.

Then you need code for an API call at the C# end, like public async Task<IActionResult<int>> GetCountOfFolders() { ... } and it needs to return the number.

At the JavaScript end, you'd probably write let result = await fetch("/your/url/here) and then something like let count = await result.JSON(); .

And finally, assuming you're just displaying this in a web page, you might do something like let display = document.getElementById("your-DOM-element-ID"); and finally display.innerText = count; or some other value setting.

I'm assuming here that Raspberry Pi can be accessed with the Windows-type Directory class from System.IO , and some other things. I'm also omitting a lot of detail about where you'd put that C# API call (in a controller, but that's just the beginning) and other things. And of course, if you want to load a whole page that gets the number, you wouldn't use JavaScript at all, you'd just have that API call return an HTML page with the number already inlined into it, and you'd use a browser just to request that page from your API URL -- at which point it's not really an "API" anymore.