Upload Files

README.md

On this flow we demonstrate how to use NR and Jquery to build some funcional screens and how to perform a upload of a file csv.

flow.json

[
    {
        "id": "df7dfb16.097188",
        "type": "file in",
        "z": "faec0284.5e00d",
        "name": "",
        "filename": "",
        "format": "utf8",
        "x": 126,
        "y": 347,
        "wires": [
            [
                "df773c62.724e"
            ]
        ]
    },
    {
        "id": "df773c62.724e",
        "type": "csv",
        "z": "faec0284.5e00d",
        "name": "",
        "sep": ";",
        "hdrin": true,
        "hdrout": "",
        "multi": "mult",
        "ret": "\\n",
        "temp": "",
        "x": 126,
        "y": 387,
        "wires": [
            [
                "f21b5089.53da7"
            ]
        ]
    },
    {
        "id": "5731bb5.453ce44",
        "type": "change",
        "z": "faec0284.5e00d",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "req.files['csv'][0]",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "filename",
                "pt": "msg",
                "to": "payload.path",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "originalname",
                "pt": "msg",
                "to": "payload.originalname",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 156,
        "y": 307,
        "wires": [
            [
                "df7dfb16.097188"
            ]
        ]
    },
    {
        "id": "f6d5a469.13eb68",
        "type": "httpInMultipart",
        "z": "faec0284.5e00d",
        "name": "",
        "url": "/uploadRegras",
        "method": "post",
        "fields": "[{\"name\": \"csv\", \"maxCount\": 1}]",
        "swaggerDoc": "",
        "x": 164,
        "y": 267,
        "wires": [
            [
                "5731bb5.453ce44"
            ]
        ]
    },
    {
        "id": "53b7bac.3297b44",
        "type": "http response",
        "z": "faec0284.5e00d",
        "name": "",
        "x": 892,
        "y": 418,
        "wires": []
    },
    {
        "id": "e269e79f.ef1608",
        "type": "template",
        "z": "faec0284.5e00d",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "html",
        "syntax": "mustache",
        "template": "Upload de {{originalname}} feito com sucesso!\n\n{{output}}",
        "x": 772,
        "y": 418,
        "wires": [
            [
                "53b7bac.3297b44"
            ]
        ]
    },
    {
        "id": "220c22f4.d2318e",
        "type": "join",
        "z": "faec0284.5e00d",
        "name": "",
        "mode": "auto",
        "build": "string",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "timeout": "",
        "count": "",
        "x": 532,
        "y": 418,
        "wires": [
            [
                "55959bda.5a7f54"
            ]
        ]
    },
    {
        "id": "85cad0ed.2ba2b",
        "type": "split",
        "z": "faec0284.5e00d",
        "name": "",
        "splt": "",
        "x": 386,
        "y": 467,
        "wires": [
            [
                "220c22f4.d2318e",
                "67bb1ea4.49d8f"
            ]
        ]
    },
    {
        "id": "55959bda.5a7f54",
        "type": "function",
        "z": "faec0284.5e00d",
        "name": "",
        "func": "msg.output = JSON.stringify(msg.payload);\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 652,
        "y": 418,
        "wires": [
            [
                "e269e79f.ef1608"
            ]
        ]
    },
    {
        "id": "1e2af6d6.8c4879",
        "type": "comment",
        "z": "faec0284.5e00d",
        "name": "Processamento do CSV",
        "info": "",
        "x": 590,
        "y": 380,
        "wires": []
    },
    {
        "id": "cdc4c470.0d6118",
        "type": "function",
        "z": "faec0284.5e00d",
        "name": "Criado_em e Valido_ate",
        "func": "var arrProd = [];\n\nmsg.produtos.forEach(function(p){\n    \n    var validade = new Date();\n    \n    var qdadeDias = p.valido_ate;\n    validade.setDate(validade.getDate() + qdadeDias);\n    \n    validade.setHours(23);\n    validade.setMinutes(59);\n    validade.setSeconds(59);\n    \n    p.valido_ate = validade;\n});\n\nmsg.payload.forEach(function(prod){\n\n    prod.produtos = msg.produtos;\n    prod.criado_em = new Date();\n\n    arrProd.push(prod);\n    \n});\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 186,
        "y": 467,
        "wires": [
            [
                "85cad0ed.2ba2b"
            ]
        ]
    },
    {
        "id": "6f5cdc7f.6c1bb4",
        "type": "http in",
        "z": "faec0284.5e00d",
        "name": "",
        "url": "/uploadRegras",
        "method": "get",
        "swaggerDoc": "",
        "x": 166,
        "y": 107,
        "wires": [
            [
                "86b5dfab.9153f"
            ]
        ]
    },
    {
        "id": "c79d99a3.ec22f8",
        "type": "template",
        "z": "faec0284.5e00d",
        "name": "TELA",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<!DOCTYPE html>\n<head>\n    <title>Sinapse - Porto Seguro</title>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"stylesheet\" href=\"vendor/bootstrap/css/bootstrap.min.css\">\n    \n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\n    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js\"></script>\n    <script type=\"text/javascript\">\n        $(function () {\n            var data = {{#payload}}{{{.}}}{{/payload}};\n            var transform = {\n                tag: 'tr',\n                children: [\n                    { 'tag': 'td', 'html': \"\", children: [\n                        {  'tag':'input','type': 'checkbox', 'value': '${id_produto}/${nome}', 'name': 'id_prod', 'class': 'check' }\n                    ]},\n                    { 'tag': 'td', 'html': \"${id_produto}\" },\n                    { 'tag': 'td', 'html': \"${nome}\" },\n                    { 'tag': 'td', 'html': \"\", children: [\n                        {  'tag':'input','type': 'number', 'name': '${id_produto}' }\n                    ]}\n                ]\n            };\n            $('#produtos > tbody').json2html(data, transform);\n        });\n        \n        function checar() {\n            var checado=false;\n            $(\".check\").each(function(){\n                if($(this).prop(\"checked\"))\n                    checado=true;\n            });\n            if(!checado){\n                $(\"#alert\").modal();\n                return false;\n            }\n        }\n  </script>\n</head>\n<body class=\"container\">\n    <form action=\"/uploadRegras\" method=\"post\" enctype=\"multipart/form-data\">\n    <section class=\"row\">\n        <div class=\"table-responsive\">\n        <h1>Produtos</h1>\n        <table id=\"produtos\" class=\"table table-striped table-bordered\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>id_produto</th>\n                    <th>Nome</th>\n                    <th>Validade (dias)</th>\n                </tr>\n            </thead>\n            <tbody></tbody>\n        </table>\n        \n        <h1>Upload do CSV</h1>\n        <table id=\"csv\" class=\"table table-striped table-bordered\">\n            <thead>\n                <tr>\n                    <th><input type=\"file\" name=\"csv\" required /></th>\n                </tr>\n            </thead>\n            <tbody></tbody>\n        </table>\n        </div>\n    </section>\n    \n    <section class=\"row\" style=\"text-align: center;\" >\n        <input type=\"submit\" class=\"btn btn-secondary\" value=\"ENVIAR\" onclick=\"return checar()\"/>\n        <a href=\"localhost:1880/produtos\" > <input type=\"button\" class=\"btn btn-secondary\" value=\"Cadastro de Produtos\" /> </a>\n    </section>\n    </form>   \n    \n    <!-- Modal -->\n  <div class=\"modal fade\" id=\"alert\" role=\"dialog\">\n    <div class=\"modal-dialog\">\n    \n      <!-- Modal content-->\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n          <h4 class=\"modal-title\">ATENÇÃO</h4>\n        </div>\n        <div class=\"modal-body\">\n          <p>Todas as cargas devem estar associadas a ao menos 1 produto. Por favor, selecione na listagem ou acione o botão 'Cadastro de Produtos' para inserir um novo Produto.</p>\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">OK</button>\n        </div>\n      </div>\n      \n    </div>\n  </div>\n  \n</body>\n</html>",
        "x": 490,
        "y": 160,
        "wires": [
            [
                "bf79fd07.96b56"
            ]
        ]
    },
    {
        "id": "bf79fd07.96b56",
        "type": "http response",
        "z": "faec0284.5e00d",
        "name": "",
        "x": 630,
        "y": 160,
        "wires": []
    },
    {
        "id": "86b5dfab.9153f",
        "type": "change",
        "z": "faec0284.5e00d",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "projection",
                "pt": "msg",
                "to": "{ \"_id\": 0 }",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 170,
        "y": 160,
        "wires": [
            [
                "2148bb6.1508b44"
            ]
        ]
    },
    {
        "id": "f21b5089.53da7",
        "type": "function",
        "z": "faec0284.5e00d",
        "name": "msg.produtos",
        "func": "var arr = [];\n\nvar id_produtos = msg.req.body.id_prod;\n\nif(typeof(id_produtos) === \"string\"){\n    \n    var split = id_produtos.split(\"/\");\n    var temp = {};\n    \n    temp[\"id_produto\"] = split[0];\n    temp[\"nome\"] = split[1];\n    \n    Object.keys(msg.req.body).forEach(function(id){\n        \n        if(id === temp[\"id_produto\"]){\n            temp[\"valido_ate\"] = Number (msg.req.body[id]);\n        }\n    });\n\n    arr.push(temp);\n\n}else{\n    \n    id_produtos.forEach(function(item){\n    \n    var split = item.split(\"/\");\n    var temp = {};\n    \n    temp[\"id_produto\"] = split[0];\n    temp[\"nome\"] = split[1];\n    \n    Object.keys(msg.req.body).forEach(function(id){\n        \n        if(id === temp[\"id_produto\"]){\n            temp[\"valido_ate\"] = Number (msg.req.body[id]);\n        }\n    });\n\n    arr.push(temp);\n    \n});\n    \n}\n\nmsg.produtos = arr;\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 156,
        "y": 427,
        "wires": [
            [
                "cdc4c470.0d6118"
            ]
        ]
    },
    {
        "id": "a57d1970.a64868",
        "type": "comment",
        "z": "faec0284.5e00d",
        "name": "URL de teste da tela : http://52.55.240.135:3002/uploadRegras",
        "info": "",
        "x": 297,
        "y": 66,
        "wires": []
    },
    {
        "id": "2148bb6.1508b44",
        "type": "template",
        "z": "faec0284.5e00d",
        "name": "Mock info",
        "field": "payload",
        "fieldType": "msg",
        "format": "json",
        "syntax": "plain",
        "template": "[{\"id_produto\":\"93\",\"nome\":\"AUTO_SEGURO_NOVO\"},{\"id_produto\":\"67\",\"nome\":\"PORTATEIS\"},{\"id_produto\":\"31\",\"nome\":\"VIDA INDIVIDUAL\"},{\"id_produto\":\"10\",\"nome\":\"GRAOS\"},{\"id_produto\":\"11\",\"nome\":\"SAUDE\"},{\"id_produto\":\"12\",\"nome\":\"FINANCIAMENTO\"},{\"id_produto\":\"33\",\"nome\":\"HORTA E POMAR\"},{\"id_produto\":\"55\",\"nome\":\"PATRIMONIAL\"},{\"id_produto\":\"56\",\"nome\":\"CONSÓRCIO\"},{\"id_produto\":\"66\",\"nome\":\"INVESTIMENTO\"},{\"id_produto\":\"88\",\"nome\":\"PET\"}]",
        "output": "str",
        "x": 360,
        "y": 160,
        "wires": [
            [
                "c79d99a3.ec22f8"
            ]
        ]
    },
    {
        "id": "67bb1ea4.49d8f",
        "type": "debug",
        "z": "faec0284.5e00d",
        "name": "Database record ...",
        "active": true,
        "console": "false",
        "complete": "payload",
        "x": 560,
        "y": 520,
        "wires": []
    }
]