"Rich File Manager" in node-red

Go back and read my post from 3 hours ago where I asked you to provide some information.

i have NR v0.19.4 and v10.12.0 node.js
my platform is runnig localy
i just uncomment httpstatic in settings.js to display images on dashborad
now i stil looking for a way to display local filesystem my dashboard

Here is a very simplistic way to get a list of files as separate messages. Take out the split node if you want a single, newline separated msg. It doesn't use any extra nodes, just does a posix ls command as though you were using a terminal.

[
    {
        "id": "3c45986e.400c38",
        "type": "debug",
        "z": "586832c7.9dc7fc",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 710,
        "y": 320,
        "wires": []
    },
    {
        "id": "e25a5228.ee099",
        "type": "inject",
        "z": "586832c7.9dc7fc",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 200,
        "y": 360,
        "wires": [
            [
                "ca122635.b5a538"
            ]
        ]
    },
    {
        "id": "ca122635.b5a538",
        "type": "exec",
        "z": "586832c7.9dc7fc",
        "command": "ls",
        "addpay": false,
        "append": "",
        "useSpawn": "false",
        "timer": "",
        "oldrc": false,
        "name": "",
        "x": 370,
        "y": 360,
        "wires": [
            [
                "f4fca034.47c0a"
            ],
            [
                "a02ec124.a424"
            ],
            [
                "9bfa2cd2.fb464"
            ]
        ]
    },
    {
        "id": "a02ec124.a424",
        "type": "debug",
        "z": "586832c7.9dc7fc",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 530,
        "y": 360,
        "wires": []
    },
    {
        "id": "9bfa2cd2.fb464",
        "type": "debug",
        "z": "586832c7.9dc7fc",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 530,
        "y": 400,
        "wires": []
    },
    {
        "id": "f4fca034.47c0a",
        "type": "split",
        "z": "586832c7.9dc7fc",
        "name": "",
        "splt": "\\n",
        "spltType": "str",
        "arraySplt": 1,
        "arraySpltType": "len",
        "stream": false,
        "addname": "",
        "x": 510,
        "y": 320,
        "wires": [
            [
                "3c45986e.400c38"
            ]
        ]
    }
]
1 Like

Thanks a lot. But, this does'nt work for me. I don't use terminal and i don't see any relation with my question!!!

Take it one step at a time. Make sure you can list files THEN display them on the dashboard.

  1. add an inject node, a change node, a fild lister node and a debug node.
  2. connect the inject to the file lister, the file lister to the debug node
  3. in the change node use something like this
    04%20PM
    (note: I'm using a MAC. If yo are using a PC, Pi or other linux box your path will be different.
  4. set the debug node to display the complete msg object
  5. deploy it all and look at the debug in the sidebar

You should see a list of your files if your path is correct. Now you can feed the output of the file lister into the ui node of your choice (just don't feed it into a graphing node :stuck_out_tongue_winking_eye:)

1 Like

You want a list of files - the example gives a list of files.

As I said, you HAVE to do this from Node-RED, you are not permitted by any browser to mix information from a server and from the local machine. As the UI Dashboard is delivered by Node-RED (a server), you cannot then get the list of local files from the browser itself.

Here we are saying that you can get round the issue by running Node-RED on the same device as the browser and so you can get to the filing system on that device from Node-RED and send the information to the browser.

The example does the file list - it gets the data from the filing system via an operating system command. The next step would be to send that information through to the browser using Dashboard.

Please try the example before dismissing it.

@TotallyInformation we've established the request is to list the files on the machine running Node-RED. Please don't seed further doubt with the OP on that aspect.

Sorry to disagree, but the OP seems still very confused between the back and front end processing and this is a large part of the issue here.

If he runs the example, he will probably see things more clearly. Get the back-end working first. Worry about the display afterwards.

1 Like

thank you sir your exemple works. But, why it only display the files when i push the inject node ? just putting the path in file lister doesn't display the content of the folder... !!

[{"id":"2008dc88.52bbc4","type":"tab","label":"Flow 17","disabled":false,"info":""},{"id":"f05ab586.600e48","type":"fs-file-lister","z":"2008dc88.52bbc4","name":"","start":"C:\\Users\\Public\\img\\tmp\\","pattern":"*","path":false,"single":true,"depth":"0","stat":false,"x":320,"y":240,"wires":[["d4c9a425.84e128","56928b17.3f5344"]]},{"id":"d4c9a425.84e128","type":"debug","z":"2008dc88.52bbc4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":530,"y":240,"wires":[]},{"id":"a99e9181.01db6","type":"inject","z":"2008dc88.52bbc4","name":"Inject Payload JSON","topic":"","payload":"{\"folder\":\"C:/Users/Public/img/tmp\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":"","x":150,"y":240,"wires":[["f05ab586.600e48"]]},{"id":"56928b17.3f5344","type":"ui_text","z":"2008dc88.52bbc4","group":"187dc22.e089e3e","order":0,"width":"9","height":"6","name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":510,"y":200,"wires":[]},{"id":"187dc22.e089e3e","type":"ui_group","z":"","name":"row1","tab":"75e9c681.693d18","disp":false,"width":"10","collapse":false},{"id":"75e9c681.693d18","type":"ui_tab","z":"eda5f7e4.daec48","name":"Tab 1","icon":"dashboard","order":"1"}]

i'm so sorry, i really don't get your point sir. i will re-test it again to understand and see things more clearly.

Because the file lister node requires an input for it to start running. If you don't understand that, I urge you to take a Node-RED tutorial and understand the basics of how NR works. You will find many on the web with a quick google search using the terms node-red tutorial

2 Likes

thanks. I read the information node and understood it well.

If you've run it again, you should be seeing something similar to the output from @zenofmud.

What you are doing with these examples is using Node-RED as a "server" (AKA a "back-end") to create information that can be further processed.

Once you've understood that, you can go on to think about how that information can be displayed to a user. Users interact with your information via a web page in their browser - this is sometimes referred to as the "front-end".

So you need a way to get the information from the back-end to the front-end. The simplest way of doing this is to use node-red-dashboard which creates a web page for you and creates a 2-way link between the browser (front-end) and Node-RED (back-end).

Right, I need to get off to work but here is a final example showing you how to get the simple file list through to a user interface at the front-end. Once you've committed it and pressed the inject button, open a browser tab to http://localhost:1880/ui (assuming you have everything set to default). The "TEST" tab will show you the same information twice - once all jammed together and once with a simple line-by-line output.

[{"id":"5070ccce.4472c4","type":"debug","z":"586832c7.9dc7fc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":670,"y":440,"wires":[]},{"id":"a151b616.5a5e48","type":"inject","z":"586832c7.9dc7fc","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":400,"wires":[["bace3d2a.dae1b"]]},{"id":"bace3d2a.dae1b","type":"exec","z":"586832c7.9dc7fc","command":"ls","addpay":false,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"","x":330,"y":400,"wires":[["5a606c58.1f2354","30b6f0f2.04cbf","f071c7d2.6ad838"],["7f288152.3d7db"],["ada40429.184168"]]},{"id":"7f288152.3d7db","type":"debug","z":"586832c7.9dc7fc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":550,"y":480,"wires":[]},{"id":"ada40429.184168","type":"debug","z":"586832c7.9dc7fc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":550,"y":520,"wires":[]},{"id":"5a606c58.1f2354","type":"split","z":"586832c7.9dc7fc","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":530,"y":440,"wires":[["5070ccce.4472c4"]]},{"id":"30b6f0f2.04cbf","type":"ui_text","z":"586832c7.9dc7fc","group":"c58b912f.f205e","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":530,"y":320,"wires":[]},{"id":"f071c7d2.6ad838","type":"ui_template","z":"586832c7.9dc7fc","group":"c58b912f.f205e","name":"Output file list to simple, fixed-width card","order":0,"width":"12","height":"16","format":"<pre>\n{{msg.payload}}\n</pre>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":640,"y":380,"wires":[[]]},{"id":"c58b912f.f205e","type":"ui_group","z":"","name":"Default","tab":"baba3532.49f218","disp":true,"width":"12","collapse":false},{"id":"baba3532.49f218","type":"ui_tab","z":"","name":"TEST","icon":"dashboard"}]

Now you need to start thinking about how to improve on that and what skills you need to learn in order to do so.

1 Like

for now. is there a way to open the content's file (pdf, txt, ..) when i click on it in frame inside dashboard ??

Yes. But I don't know that any of us have the time to walk you through learning everything you need to know.

In a nutshell, you will need to split the list into an array and use that to create an HTML list. For each list item, you will need to wrap the text in HTML that, when clicked, will send an appropriate response back to Node-RED. Once back in Node-RED (having included the required file name in the response), you will feed the file name into a file read node then send the result back through to the front-end.

2 Likes