I want to get the list of all directories with files in them and display their content on the front end using Angular in the Electron app.
What I'm Doing Now: I am reading a Directory path using NodeJS and after reading it convert that path into a tree using an algorithm here is its output for this path ("../f1/f2/f3/f4/test.txt") `
{
"name": "f1",
"children": [
{
"name": "f2",
"children": [
{
"name": "f3",
"children": [
{
"name": "f4",
"children": [
{
"name": "test.txt",
"children": [],
"id": "test.txt0"
}
],
"id": "f40"
}
],
"id": "f30"
}
],
"id": "f20"
}
],
"id": "f13"
}
Here is the Front-end Output:
Issues: One of the biggest issues is getting the paths of all Files on front-end. If I click on the 'test.txt' it should open on the side pane, but the issue is I'm unable to get the paths of files along with the tree. How can I do it? I have tried all the possible solutions but unable to get them.
Secondly, I have tried multiple solutions to display the directory tree on the front end in Angular, but some of them come up with pricing and most of them are outdated, A few of them if available have restricted access. like, cannot edit node or leaf or put a file path on a leaf, etc.
Last but not least issue is to send the path to the file reader in Angular, The fileReader only gets different info and is specifically used with input type file. On the other hand, I have only a file path without an input type file.
Thanks for your suggestions in advance
