Search code examples
imageuploadnode-red

Node-Red Uploaded image gets corrupted

I have a Node-RED flow to upload an image and save it to a file. But the image gets corrupted on upload/save. I tested to change the file via file explorer and my server showed my image perfectly. So the problem is the upload section and when i download the uploaded picture my windows photos shows me that the "file type is probably not supported".

Flow Image

My flow:

[{"id":"b561f39b.7a55c","type":"ui_upload","z":"85326e02.d8e2b","group":"e12d112e.2bd9c","title":"Hallenplan (PNG, 1280x600)","name":"","order":3,"width":0,"height":5,"chunk":"256","transfer":"binary","x":130,"y":380,"wires":[["7f8ff192.87745"]]},{"id":"7f8ff192.87745","type":"file","z":"85326e02.d8e2b","name":"","filename":"/tmp/hallenplan.png","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"binary","x":550,"y":380,"wires":[[]]},{"id":"8f232064.9538","type":"http in","z":"85326e02.d8e2b","name":"","url":"/img/hallenplan.png","method":"get","upload":false,"swaggerDoc":"","x":170,"y":440,"wires":[["96426e36.186fb"]]},{"id":"96426e36.186fb","type":"file in","z":"85326e02.d8e2b","name":"","filename":"/tmp/hallenplan.png","format":"","x":400,"y":440,"wires":[["a62d44b7.b91498"]]},{"id":"751ec35b.adf85c","type":"http response","z":"85326e02.d8e2b","name":"","statusCode":"","headers":{},"x":770,"y":440,"wires":[]},{"id":"a62d44b7.b91498","type":"change","z":"85326e02.d8e2b","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"image/png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":440,"wires":[["751ec35b.adf85c"]]},{"id":"e12d112e.2bd9c","type":"ui_group","name":"Upload","tab":"acda14fc.fcb598","order":2,"disp":true,"width":"12","collapse":false},{"id":"acda14fc.fcb598","type":"ui_tab","name":"Timo_Burkhardt","icon":"dashboard","disabled":false,"hidden":false}]
Solution

  • Here is a full flow for repeatedly uploading png images of any size (that fits in memory) to /tmp/image.png.

    enter image description here

    How it works:

    • get image chunks uploaded with node ui_upload
    • set type to buffer since ui_node sets the default type as string
    • join chunks to a blob in memory
    • save blob to file by overwriting an existing file

    The flow code:

    [{"id":"87b7f497.057208","type":"file","z":"8130dbcf.fc6768","name":"","filename":"/tmp/image.png","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"setbymsg","x":640,"y":220,"wires":[[]]},{"id":"b4191d57.653ad8","type":"join","z":"8130dbcf.fc6768","name":"","mode":"auto","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":"false","timeout":"","count":"","reduceRight":false,"x":470,"y":220,"wires":[["87b7f497.057208"]]},{"id":"584ef1f0.f312e8","type":"change","z":"8130dbcf.fc6768","name":"Set type=buffer","rules":[{"t":"set","p":"parts.type","pt":"msg","to":"buffer","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":220,"wires":[["b4191d57.653ad8"]]},{"id":"86a479d3.e5fd6","type":"ui_upload","z":"8130dbcf.fc6768","group":"ca0d541e.2985e","title":"upload2","name":"","order":1,"width":0,"height":5,"chunk":256,"transfer":"binary","x":130,"y":220,"wires":[["584ef1f0.f312e8"]]},{"id":"ca0d541e.2985e","type":"ui_group","name":"Konfiguration","tab":"b75d261a.ea0aa8","order":1,"disp":true,"width":"6","collapse":false},{"id":"b75d261a.ea0aa8","type":"ui_tab","name":"Floorplan","icon":"dashboard","disabled":false,"hidden":false}]