POST call with a file attachment

#1

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.

#2

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"]]}]
#3

I tested this template but it returns me a message from: "Error: getaddrinfo ENOTFOUND some some:80"

#4

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)

#6

Thank you for your help! Can you tell me how I can use this template to send an image that is in a url?

#7

No sorry its not my template and thats not what the template is designed to do..