I’m trying to build a flow where the user uploads a PDF file via a simple form, the file is then used as a form param (multipart/form-data) to call an external RESTful endpoint and then handle the response. I’m struggling with passing the uploaded file as an input to the POST call.
Has anyone been able to successfully invoke a REST endpoint with a file attachment using a multipart/form-data approach?
Here is how I'm able to successfully call the endpoint using a REST client.
Here is what I have so far …
[{"id":"cb03617a.7eabd","type":"http in","z":"ea71b470.3cb898","name":"","url":"/ocr","method":"get","upload":false,"swaggerDoc":"","x":101,"y":80.14286041259766,"wires":[["597d99f6.4181f8"]]},{"id":"278d9e8e.b5c2f2","type":"http in","z":"ea71b470.3cb898","name":"OCR Post","url":"/ocrpost","method":"post","upload":true,"swaggerDoc":"","x":89,"y":169.1428680419922,"wires":[["660d05c2.36954c","42b1075.bc27af8"]]},{"id":"bfcf0246.1d8d4","type":"http response","z":"ea71b470.3cb898","name":"Call Post","x":738,"y":80.14286041259766,"wires":[]},{"id":"87fef2d.a4ac51","type":"template","z":"ea71b470.3cb898","name":"Get Input","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n\t<head>\n\t\t<title>Convert OCR using C&C</title>\n\t\t<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n\t\t\t<meta charset=\"utf-8\">\n\t\t\t\t<script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\"></script>\n\t\t\t\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js\" integrity=\"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49\" crossorigin=\"anonymous\"></script>\n <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\" integrity=\"sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T\" crossorigin=\"anonymous\"></script>\n\t\t\t\t<style>{{{payload.style}}}</style>\n\t\t\t</head>\n\t\t\t<body>\n\t\t\t <div class=\"panel-body\">\n \t\t\t <form action=\"/ocrpost\" enctype=\"multipart/form-data\" method=\"POST\">\n <input type=\"file\" name=\"file\" class=\"file custom-file\" data-show-preview=\"false\" />\n <input type=\"submit\" class=\"btn btn-success\" />\n </form>\n </div>\n\t\t\t \n \t\t\t<div class=\"component-example\">\n \t\t\t\t<span id=\"result\"></span>\n \t\t\t</div>\n\t\t\t</body>\n\t\t</html>\n\t\t<script>{{{payload.script}}}</script>","x":568,"y":81.14286041259766,"wires":[["dd8cd2f4.c2d8c","bfcf0246.1d8d4"]]},{"id":"660d05c2.36954c","type":"debug","z":"ea71b470.3cb898","name":"","active":true,"console":"false","complete":"true","x":244.71424865722656,"y":125,"wires":[]},{"id":"dd8cd2f4.c2d8c","type":"debug","z":"ea71b470.3cb898","name":"","active":true,"console":"false","complete":"true","x":725.7142333984375,"y":20,"wires":[]},{"id":"1d5c4832.2ecb68","type":"template","z":"ea71b470.3cb898","name":"JS","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"$(document).ready(function(e) {\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize();\n var form_url = $(this).attr(\"action\");\n var form_method = $(this).attr(\"method\").toUpperCase();\n \n $(\"#loadingimg\").show();\n \n $.ajax({\n url: form_url, \n type: form_method, \n data: form_data, \n cache: false,\n success: function(returnhtml){ \n $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});\n\ndocument.getElementById(\"uploadBtn\").onchange = function () {\n document.getElementById(\"uploadFile\").value = this.value.substring(12);\n};","x":420,"y":81.14286041259766,"wires":[["87fef2d.a4ac51"]]},{"id":"1e6b39c6.576dd6","type":"http response","z":"ea71b470.3cb898","name":"","x":975,"y":166.1428680419922,"wires":[]},{"id":"59a8b6cd.147fc8","type":"http request","z":"ea71b470.3cb898","name":"C&C","method":"POST","ret":"obj","url":"some api url","tls":"","x":569,"y":168,"wires":[["430a0058.da266","6bef627a.07f21c"]]},{"id":"ea6d521c.d4085","type":"function","z":"ea71b470.3cb898","name":"Set Headers","func":"// store te original file details\nmsg.originalFileContents = {};\nif (msg.req.files[0].mimetype.includes('pdf')) {\n msg.originalFileContents = `<embed width=\"700px\" height=\"700px\" src=\"data:application/pdf;base64,${msg.payload.toString('base64')}\">`;\n \n msg.payload = `\"Content-Type: application/pdf ${msg.payload}\"`;\n}\n\nvar form = \"\";\nform = form + \"form-data; name='file'; filename=\" + msg.payload;\n\nvar file = msg.payload;\n\nmsg.headers = {};\nmsg.headers['Accept'] = 'application/json';\nmsg.headers['Content-Type']= 'multipart/form-data';\n//msg.headers = {'Content-Type':'application/x-www-form-urlencoded'};\n//msg.headers = {'Content-Type':'application/pdf'};\n//msg.headers['Content-Disposition']= `form-data; name=\"file\"; filename=${msg.req.files[0].originalname}`\nmsg.headers['Content-Disposition']= `form-data; name=\"file\"; filename=${msg.req.files[0].originalname}`\n\n//attachment; filename=fred.zip\n\nmsg.params={};\nmsg.params[\"version\"]=\"2017-12-12\";\nmsg.params[\"subdomain\"]=\"contract\";\nmsg.params[\"categorize\"]=\"false\";\nmsg.params[\"analyze\"]=\"false\";\n\nmsg.form={}\nmsg.payload[\"file\"]=`\"data:application/pdf;base64,${msg.payload.toString('base64')}\"`;\n\n//msg.payload = {};\n//msg.payload['file'] = file;\n\nreturn msg;","outputs":1,"noerr":0,"x":391,"y":168,"wires":[["6f0e1ec9.c46a5","59a8b6cd.147fc8"]]},{"id":"430a0058.da266","type":"debug","z":"ea71b470.3cb898","name":"","active":true,"console":"false","complete":"true","x":702,"y":257,"wires":[]},{"id":"6f0e1ec9.c46a5","type":"debug","z":"ea71b470.3cb898","name":"","active":true,"console":"false","complete":"true","x":498,"y":257,"wires":[]},{"id":"597d99f6.4181f8","type":"template","z":"ea71b470.3cb898","name":"BS","field":"payload.style","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","x":280,"y":81,"wires":[["1d5c4832.2ecb68"]]},{"id":"42b1075.bc27af8","type":"change","z":"ea71b470.3cb898","name":"Read File Buffer","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":249,"y":228,"wires":[["ea6d521c.d4085"]]},{"id":"6bef627a.07f21c","type":"template","z":"ea71b470.3cb898","name":"Display","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n .row {\n display: flex;\n }\n \n .column {\n flex: 50%;\n }\n</style>\n\n<div class=\"row\">\n <div class=\"column\">\n <pre>\n {{{originalFileContents}}}\n </pre>\n </div>\n <div class=\"column\">\n <pre>\n {{{originalFileContents}}}\n </pre>\n </div>\n</div>","output":"str","x":783,"y":167,"wires":[["1e6b39c6.576dd6"]]}]
I tested this template but it returns me a message from: "Error: getaddrinfo ENOTFOUND some some:80"
You need to edit the node entitled C&C to supply the REST endpoint of the OCR service you are using ( and edit the flow accordingly)
Thank you for your help! Can you tell me how I can use this template to send an image that is in a url?
No sorry its not my template and thats not what the template is designed to do..
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy