# Esp32-cam choose which file to view
**URL:** https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796
**Category:** Dashboard
**Created:** [17 May 2020 13:29 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796 "2020-05-17T13:29:20Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@muggins](https://discourse.nodered.org/u/muggins)
#### Post date: [17 May 2020 13:29 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/1 "2020-05-17T13:29:20Z")
Hi
I have managed to get my ESP32-cam to upload to my RPI in a folder under html and web accessible.
Reference [https://robotzero.one/posting-data-server-esp32](https://robotzero.one/posting-data-server-esp32)
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.
thanks
John
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 May 2020 13:39 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/2 "2020-05-17T13:39:34Z")
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
---
### Author:  [@muggins](https://discourse.nodered.org/u/muggins)
#### Post date: [17 May 2020 14:23 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/3 "2020-05-17T14:23:16Z")
> [@Steve-Mcl](#):
>
> node-red-contrib-fs-ops
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.
John
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 May 2020 14:26 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/4 "2020-05-17T14:26:41Z")
Try `~/pi/Pictures` or `/home/pi/Pictures`
---
### Author:  [@muggins](https://discourse.nodered.org/u/muggins)
#### Post date: [17 May 2020 15:25 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/5 "2020-05-17T15:25:36Z")
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?
thanks
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [17 May 2020 20:00 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/6 "2020-05-17T20:00:53Z")
> [@muggins](#):
>
> 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](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/11) is a good explanation how to do that.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 May 2020 21:10 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/7 "2020-05-17T21:10:37Z")
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...
e.g...
The flow. NOITE: change the path and filter settings in the "Directory" node to `/home/pi/Pictures` directory and the filter to \*.jpg
```auto
[{"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":"\n \n
\n\n\n\n\t\n\t\t| {{obj.name}} | \n\t\tdownload | \n\t
\n
","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}]
```
---
### Author:  [@muggins](https://discourse.nodered.org/u/muggins)
#### Post date: [18 May 2020 10:16 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/8 "2020-05-18T10:16:17Z")
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.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 May 2020 10:34 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/9 "2020-05-18T10:34:08Z")
Instead of (or as well as) making the download link, you could just as easily generate an img tag in that template
Something like
```auto
```
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.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 June 2020 10:34 UTC](https://discourse.nodered.org/t/esp32-cam-choose-which-file-to-view/26796/10 "2020-06-17T10:34:08Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.