Esp32-cam choose which file to view

I have managed to get my ESP32-cam to upload to my RPI in a folder under html and web accessible.
Each image is time stamped and I can view any specific one by hard coding a template and viewing in dashboard. I wonder is there any way I can view a list of available files and choose one to view.

You could use the node-red-contrib-fs-ops nodes. When installed, there is one called directory that will return an array of file names (filtered to *.jpg if need be).

From this, you could build a table of hyperlinks in ui_template or send it to ui_table for fancy formatting

Thanks for that, it gives me some direction to start "googling"
Unfortunately I have fallen at the first hurdle in that using the directory node with a path of "home/pi/Pictures" I get no output. I have tried several different folders that contain files and tried various syntax.

Try ~/pi/Pictures or /home/pi/Pictures

1 Like

Apologies, just me being stupid. I needed to debug as a "complete message object" to see the result.
So I use a button to trigger this listing. Then a function to somehow populate a dropdown box containing links to the files. Does that make sense? Also I have an issue with relative path. In template I put
img src="/home/pi/Pictures/xxxx.jpg" style="width:100%"
This produces no image. Does the image folder have to reside within the www/html domain?

Hi John,
Indeed your browser cannot access files locally on your Raspberry. Luckily...
So you need to publish your images in an accessible folder. Here is a good explanation how to do that.

NOTE: This solution uses the node-red-contrib-fs-ops nodes (install via pallet manager)

So - you can make a folder public as @BartButenaers says or you can make an end point to deliver files

This should get you started...


The flow. NOITE: change the path and filter settings in the "Directory" node to /home/pi/Pictures directory and the filter to *.jpg

[{"id":"a64dda71.3761a8","type":"ui_template","z":"e360ac5b.0ab79","group":"bab313df.9c70e","name":"ui_temlplate - present download links on dashboard","order":0,"width":0,"height":0,"format":"<div ng-repeat=\"obj in msg.payload\">\n    \n</div>\n\n\n<table border=\"1\">\n\t<tr ng-repeat=\"obj in msg.payload\">\n\t\t<td>{{}}</td>\n\t\t<td><a href='{{obj.url}}'>download</a></td>\n\t</tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":350,"y":460,"wires":[[]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"d161fbe3.369e78","type":"ui_ui_control","z":"e360ac5b.0ab79","name":"","events":"change","x":220,"y":400,"wires":[["77871cdc.8b5264"]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"77871cdc.8b5264","type":"fs-ops-dir","z":"e360ac5b.0ab79","name":"","path":"c:\\temp","pathType":"str","filter":"*.csv","filterType":"str","dir":"files","dirType":"msg","x":360,"y":400,"wires":[["7378c226.96aedc"]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"7378c226.96aedc","type":"function","z":"e360ac5b.0ab79","name":"","func":"var opts = []\nvar path = msg.payload;\nfor (let index = 0; index < msg.files.length; index++) {\n    const element = msg.files[index];\n    var opt = {\n        url: \"/files/\" + element,\n        name: element\n    }\n    opts.push(opt)\n}\nmsg.payload = opts;\nreturn msg;","outputs":1,"noerr":0,"x":490,"y":400,"wires":[["a64dda71.3761a8"]],"info":"## Title\n### Info...\n- point 1\n- point 2\n\n*More info*"},{"id":"bab313df.9c70e","type":"ui_group","z":"","name":"Data Export","tab":"a5270027.43aab","disp":true,"width":"12"},{"id":"a5270027.43aab","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1}]
1 Like

Thats fantastic. Thank you so much. I love node-red and especially love this forum where everyone seems to be so helpful and tolerant of beginners (unlike some other forums)
That worked perfectly, all I need to work out now is how to show souce image.

1 Like

Instead of (or as well as) making the download link, you could just as easily generate an img tag in that template

Something like

<img src="{{url}}" alt="{{name}}">

But be warned, this will get slow of there are many images or if they are large.

Also, you might wanna set a width and height on the img

I would probably limit the loop to 10 and have some kind of "next page" or a filter for each day's images.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.