Simple list of images with delete

This is a simple flow which creates a webpage with a list of images on it; each has a delete link, and at the bottom there is a Delete All link. I use this flow to review the output of a motion sensing image capture. It does need fs in global....

[{"id":"745f195.0b683e8","type":"http in","z":"dc092af8.1b8388","name":"","url":"/picture","method":"get","upload":false,"swaggerDoc":"","x":110,"y":80,"wires":[["d60dc68a.ccfc68"]]},{"id":"d06930de.b0d63","type":"http response","z":"dc092af8.1b8388","name":"","statusCode":"","headers":{},"x":790,"y":80,"wires":[]},{"id":"e2945f7.b650ca","type":"template","z":"dc092af8.1b8388","name":"listtemplate","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n<head>\n    \n</head>\n<body>\n<script>\n    history.pushState(null, \"\", location.href.split(\"?\")[0]);\n</script>    \nSpot the mink:<br/> \n<ul>\n    {{#payload}}\n    <img src=\"\\pictures?file={{name}}\"></img>\n    <a href=\"\\picture?delfile={{name}}\" >Del</a>\n    <br/>\n    {{/payload}}\n</ul>\n<a href=\"\\picture?delfile=all\" >Delete all</a>\n</body>\n</html>\n","output":"str","x":630,"y":80,"wires":[["d06930de.b0d63"]]},{"id":"d60dc68a.ccfc68","type":"function","z":"dc092af8.1b8388","name":"delfile","func":"var p= flow.get(\"pictures\");\nvar fs = global.get('fs');\n\n\nif (msg.payload.delfile){\n    var dir = '/home/pi/pi-home-surveillance/pi-home-surveillance/';\n\n    if (msg.payload.delfile === 'all'){\n        var d = fs.readdirSync(dir);\n        \n        var l = [];\n        \n        for (var i = 0; i < d.length; i++){\n            var f = d[i];\n            if (f.toLowerCase().endsWith('.jpg')){\n                var filename = dir + f;\n                try{\n                    fs.unlinkSync(filename);\n                } catch(e){\n                    \n                }\n            }\n        }\n        \n    } else {\n        var filename = dir + msg.payload.delfile;\n        try{\n            fs.unlinkSync(filename);\n        } catch(e){\n            \n        }\n    }\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":80,"wires":[["324cf82f.337ee8"]]},{"id":"825b045b.15c398","type":"http in","z":"dc092af8.1b8388","name":"","url":"/pictures","method":"get","upload":false,"swaggerDoc":"","x":110,"y":140,"wires":[["5d0fee29.4ee7"]]},{"id":"f8c90878.4ddee8","type":"http response","z":"dc092af8.1b8388","name":"","statusCode":"200","headers":{"Content-Type":"image/jpeg"},"x":620,"y":140,"wires":[]},{"id":"5d0fee29.4ee7","type":"function","z":"dc092af8.1b8388","name":"createfilename","func":"var dir = '/home/pi/pi-home-surveillance/pi-home-surveillance/';\n\nmsg.filename = dir + msg.payload.file;\nreturn msg;","outputs":1,"noerr":0,"x":320,"y":140,"wires":[["8c65dd19.ff18f"]]},{"id":"8c65dd19.ff18f","type":"file in","z":"dc092af8.1b8388","name":"","filename":"","format":"","chunk":false,"sendError":false,"x":470,"y":140,"wires":[["f8c90878.4ddee8"]]},{"id":"324cf82f.337ee8","type":"function","z":"dc092af8.1b8388","name":"getfolder","func":"var dir = '/home/pi/pi-home-surveillance/pi-home-surveillance';\n\nvar fs = global.get('fs');\n\nvar d = fs.readdirSync(dir);\n\nvar l = [];\n\nfor (var i = 0; i < d.length; i++){\n    var f = d[i];\n    if (f.toLowerCase().endsWith('.jpg')){\n        l.push({name: f});\n    }\n}\n\nfunction compare(a,b) {\n  if (a.name < b.name)\n    return -1;\n  if (a.name > b.name)\n    return 1;\n  return 0;\n}\n\nl.sort(compare);\n\nmsg.payload = l;\n\nreturn msg;","outputs":1,"noerr":0,"x":440,"y":80,"wires":[["e2945f7.b650ca"]]}]
btsimonh

Flow Info

created 2 months, 2 weeks ago

Node Types

Core
  • file in (x1)
  • function (x3)
  • http in (x2)
  • http response (x2)
  • template (x1)

Tags

  • motion
  • image
  • webpage
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option