CODEWITHSUNDEEP
javascripthtmlangularjsdirectory-browsing
ImZyzzBrah
ImZyzzBrah

Reputation: 142

How to implement file navigation? (meaning directory browsing on the side)

What I mean is basically what's shown in the picture below (picture is fictitious).

enter image description here

I'm creating a website using HTML, Angular, Bootstrap.

I need a way to show the directories / navigate files on the computer on the page.

I am stuck: - I am not sure how to describe this, I have searched google for "file navigation", "directory navigation" and so forth with no success, maybe I am calling it by the wrong name? - I have never implemented this sort of thing before.

I would greatly appreciate someone pointing me in the right direction on how to go about doing this, since it seems like quite a simple and standard thing to do.

Goals (something very basic):
- be able to navigate through directories - show the folders and files on the webpage - be able to add a "onclick" function when click on a file (like opening the file on the same page on another section - these will only be .txt files)

Upvotes: 0

Views: 1724

Answers (1)

Quentin
Quentin

Reputation: 943563

If you want to know what files and directories are on the server, first you'll need to get the server to report what they are. You've listed a bunch of client side technologies, but you'll need server side code to do this (because the directory you want to list is on the server).

Most HTTP servers will generate the listing for you (e.g. with mod_autoindex). You could also use the server side language of your choice to generate a listing.

Since you are using Angular, you'll need to make an HTTP request to the URL that returns the listing you want, parse it to extract the data you want, and then insert that data into a view.

Upvotes: 1

Related Questions