1

My goal is to send a picture via POST request in Python and to display it in a dashboard in Node Red, but I'm stuck in the step of reading the image once it's been sent.

This is the piece of code I'm using to send the file:

directory = os.path.join(DIRECTORY_IMAGES, id)
files = {'image': open(directory,'rb')}
requests.post('http://XXX.XXX.X.XX:1880/IMAGE', files = files)

Once in Node-red, the blocks I'm using are the following:

enter image description here

The message is received, but I'm unable to get the picture out of it. As I've read in other posts the msg.payload is set to req.files[0].buffer, encoded as Base64 and displayed using <img width="16" height="16" src="files:image;base64,{{msg.payload}}" /> in a template, but that does not display the image. 

[{"id":"797939a8.a91a58","type":"http response","z":"ddfa6621.2e7168","name":"","statusCode":"","headers":{},"x":1290,"y":2280,"wires":[]},{"id":"d5b145ce.a712f8","type":"ui_template","z":"ddfa6621.2e7168","group":"9beeae56.34305","name":"Display image","order":4,"width":"7","height":"6","format":"<img width=\"16\" height=\"16\" src=\"files:image;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1680,"y":2220,"wires":[[]]},{"id":"5e30e496.958b9c","type":"change","z":"ddfa6621.2e7168","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1300,"y":2220,"wires":[["2f260e60.d12642"]]},{"id":"2f260e60.d12642","type":"base64","z":"ddfa6621.2e7168","name":"Encode","x":1500,"y":2220,"wires":[["d5b145ce.a712f8"]]},{"id":"18c71628.986f4a","type":"http in","z":"ddfa6621.2e7168","name":"","url":"IMAGE","method":"post","upload":true,"swaggerDoc":"","x":1050,"y":2220,"wires":[["5e30e496.958b9c","797939a8.a91a58"]]},{"id":"9beeae56.34305","type":"ui_group","z":"","name":"Última pierna procesada","tab":"223d38a0.9cbaa8","order":8,"disp":true,"width":"7","collapse":false},{"id":"223d38a0.9cbaa8","type":"ui_tab","z":"","name":"CALIDAD PULPAS CINTA 0","icon":"dashboard","disabled":false,"hidden":false}]

What am I missing?

Arduino
  • 373
  • 1
  • 3
  • 21
  • Take a look at this [LINK](https://stackoverflow.com/questions/57037841/send-binary-image-by-post-request/57042336#57042336), check if this works – Nitin Aug 01 '19 at 19:58
  • I guess the issue is in the Node-red part, I'm sending the data and it is received, but no further action is taken – Arduino Aug 01 '19 at 20:35
  • Have you attached debug nodes along the flow to be sure you are getting what you expect. Also check the browser console for the dashboard. – hardillb Aug 01 '19 at 21:22

1 Answers1

2

The img src tag should start with data:image/jpeg;base64, (assuming a JPEG image)

You should swap the image/jpeg for the mime type of the image, e.g. image/png

[{"id":"9dff2c2e.66ea1","type":"http response","z":"c09a8743.c89388","name":"","statusCode":"","headers":{},"x":390,"y":180,"wires":[]},{"id":"68e0a720.f29498","type":"ui_template","z":"c09a8743.c89388","group":"efcf5006.15dae","name":"Display image","order":4,"width":"7","height":"6","format":"<img width=\"16\" height=\"16\" src=\"data:image/jpeg;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":800,"y":120,"wires":[[]]},{"id":"2fb71bea.a5d1e4","type":"http in","z":"c09a8743.c89388","name":"","url":"IMAGE","method":"post","upload":true,"swaggerDoc":"","x":210,"y":120,"wires":[["9dff2c2e.66ea1","a87b8d6.a9b0c7"]]},{"id":"a87b8d6.a9b0c7","type":"change","z":"c09a8743.c89388","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":120,"wires":[["4bcddbb.38c2624"]]},{"id":"4bcddbb.38c2624","type":"base64","z":"c09a8743.c89388","name":"Encode","x":620,"y":120,"wires":[["7d7586e7.205398","68e0a720.f29498"]]},{"id":"7d7586e7.205398","type":"debug","z":"c09a8743.c89388","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":60,"wires":[]},{"id":"efcf5006.15dae","type":"ui_group","z":"","name":"Última pierna procesada","tab":"65324def.436554","order":8,"disp":true,"width":"7"},{"id":"65324def.436554","type":"ui_tab","z":"","name":"CALIDAD PULPAS CINTA 0","icon":"dashboard"}]

triggered with the following python:

import requests

files = {'image': open('/Users/hardillb/temp/photos/DSC_7188.JPG', 'rb')}
requests.post('http://localhost:1880/IMAGE', files = files)
hardillb
  • 54,545
  • 11
  • 67
  • 105
  • I've done that, but the only debug message I see is the following in the HTTPInMultipart node: "MulterError: Unexpected field". I've set the fields as `[{"name":"myFile"}]`, and the files I'm sending as `files = {'name':('myFile', open('image.jpg', 'rb'), 'image/jpg')}` – Arduino Aug 01 '19 at 21:54
  • 1
    I've just tested this with the changes I suggested and it works perfectly. I've edited the answer to include my version of the flow (only change is to prefix in the `src` attribute of the `img` tag in the template node. – hardillb Aug 02 '19 at 08:13
  • 1
    @hardillb, thank you for your answer. It works for me, so upvoted (as usual on your answers). Just wonder if the attributes width="16" height="16" in the ui_template serve to any purpose. The image size seems to be controlled only by the ui_template widget size. If i wanted to send the HTTP post from a Node-RED instance should I set the header "Content-Type" to "multipart/form-data" or to "image/jpeg"? – AIOT MAKER Aug 03 '19 at 16:17
  • 1
    You can accept answers (click on the tick) as well. As for the size of the image, best bet is to use Chrome's inspect function to check what CSS styling is being applied – hardillb Aug 03 '19 at 17:56