Form together with dropzone, send the images into the pdf - node-red
25/01/2023
0
Guys, hello everyone!!!!
First of all, I'm not a programmer, sometimes when I have a project I try to "program" a little, in the end I really like it. But my area is networks, anyway. Come on.
I'll explain what my project does.
I want to fill out a form and host the images via dropzone, then send this data to pdf..
The system is already doing almost everything, I fill in the form, I host the images via dropzone, I can save everything inside a folder and I can create a pdf file with the data, so I can't send the images inside the PDF... .. I wanted an idea of how I can do this, could someone give me the way????
Inside the template there is an html form, the data is being received by {{}}... I would like to send the images to the "visit information in images" form.. how would it be?? I already thank everyone on the forum for making me get here with my project!! Thank you very much, below I will send my code. Thanks!!!
I'm using NODE-RED
below I send the flow to you. Thanks
[
{
"id": "7e86bbcb4d2deeb3",
"type": "tab",
"label": "Flow 19",
"disabled": false,
"info": "",
"env": []
},
{
"id": "cf3c5eef33930225",
"type": "ui_template",
"z": "7e86bbcb4d2deeb3",
"group": "a4f1b6144f9c6973",
"name": "Pagina",
"order": 1,
"width": 6,
"height": 15,
"format": "<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>\n<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />\n\n\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">\n</script>\n\n<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>\n\n\n<script>\n function auto_height(elem) { /* javascript */\nelem.style.height = "1px";\nelem.style.height = (elem.scrollHeight)+"px";\n}\n\n</script>\n\n\n\n<script>\n //dropzone config\n\nvar adPhotosDropzone = new Dropzone("#enviadropzone", {\n autoProcessQueue: false,\n maxFilesize: 8,\n addRemoveLinks: true,\n //previewsContainer: null,\n //clickable: false,\n parallelUploads: 50,\n dictDefaultMessage: "<h1>Adicione as fotos aqui</h1>"\n\n});\n\n</script>\n\n\n\n\n<! Css para text >\n\n\n<style>\n.auto_height {\n/* CSS */\nwidth: 65%;\n\n\n}\n/*css para input text*/\n.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:50%}\n\n/* css para o dropdown */\n.w3-input2{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:70%}\n\n.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}\n\n\n/*css para text e textarea*/\n\ntextarea:focus, input[type=text]:focus, select:focus, datetime:focus {\nbackground-color: lightblue;\n}\n\n\n/*css para select */\n\n/* select {\nwidth: 70%;\npadding: 16px 20px;\nborder: none;\nborder-radius: 4px;\nbackground-color: #f1f1f1;\n\n\n\n}\n*/\n\n</style>\n\n\n\n \n\n<script type="text/javascript">\n theScope = scope;\n (function(scope) {\n \n } );\n \n (scope);\n\n\n // if (adPhotosDropzone.getAcceptedFiles().length > 0) {\n\n $(document).ready(function() {\n \n //$("#form1").on("submit", function(){ \n $("#form1").on("submit", function(event) {\n\t\t//$('form').on('submit', function(event) {\n if (adPhotosDropzone.getAcceptedFiles().length > 0) {\n\n\t\t\tevent.preventDefault();\n\t\t\t\n\t\t\t// It returns a array of object\n\t\t\tlet userinfo = $(this).serializeArray();\n\t\t\tlet user = {};\n\t\t\tuserinfo.forEach((value) => {\n\t\t\t\t\n\t\t\t\t// Dynamically create an object\n user[value.name] = value.value;\n\t\t\t});\n\t\t\tlet url = "envia_tudo";\n\t\t\t$.ajax({\n\t\t\t\tmethod: "POST",\n\t\t\t\turl: url,\n\t\t\t\tdata: user\n\t\t\t}).done(function(msg) {\n //dropzone//\n \n // enable auto process queue after uploading started\n adPhotosDropzone.options.autoProcessQueue = true;\n // queue processing\n adPhotosDropzone.processQueue();\n \n adPhotosDropzone.on("queuecomplete", function() {\n adPhotosDropzone.options.autoProcessQueue = false;\n //alert("Eu sou um alert!");\n adPhotosDropzone.removeAllFiles();\n })\n\t\t\t\t\n \n //apaga dados digitados;\n document.getElementById("form1").reset();\n\n\n\t\t\t\t// When the request is successful\n theScope.send({payload: 'Fotos e dados enviado com sucesso!'});\n \n\n \n\n\n\t\t\t}).fail(function(err, textstatus, error) {\n theScope.send({payload: 'ERRO, REFAÇA POR FAVOR!'});\t\t\t});\n }\n\n\n else{\n theScope.send({payload: 'Por favor, adicione foto!'});\n }\n \n\t\t});\n\n \n\t});\n\n \n\n // else{\n\n // alert("Eu sou um alert!");\n\n\n </script>\n\n\n <form id="form1" name="form1" class="form1"> \n \n <p>\n <label>Cliente*</label> <br>\n <select class="w3-input2" id="cliente" name="cliente" required>\n <option value="">--Por favor, selecione cliente--</option>\n <option value="clientecristal">Cristal Tower</option>\n <option value="clientebritannia">Condominio Britannia</option>\n <option value="clientemillennium">Millennium</option>\n </select>\n \n </p>\n\n<br>\n \n <p>\n <label>Nome cliente*</label>\n <input required="required" class="w3-input" type="text" name="nomecliente" id="nomecliente">\n </p>\n <br>\n <p>\n <label>Data e hora*</label>\n <input type="datetime-local" class="w3-input" id="datahora" name="datahora" required>\n </p>\n <br>\n <p>\n <label>Qual serviço?*</label> <br>\n <select class="w3-input2" id="tiposervico" name="tiposervico" required> \n <option value="">--Por favor, selecione serviço--</option>\n <option value="visitapreventiva">Manutenção preventiva</option>\n <option value="visitatecnica">Visita tecnica</option>\n \n </select>\n\n </p>\n <br>\n \n\n\n \n <label>Descreva serviço realizado*</label>\n <textarea rows="4" required="required" name="descricaoservico" class="auto_height" id="descricaoservico" oninput="auto_height(this)"></textarea>\n \n\n <br>\n \n\n </form>\n\n<!--\n <form action="/envia-dropzone" class="dropzone" enctype="multipart/form-data" id="enviadropzone">\n \n \n \n </form>\n-->\n\n\n<br>\n\n\n<!-- botão fora do form, apenas colode id no form e atribua no button -->\n\n\n<div style="text-align:center;">\n<md-button form="form1" class="enviar" type="submit"style="width: 250px; height:40px;">Enviar</md-button>\n</md-button> \n</div> \n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 520,
"y": 220,
"wires": [
[
"bc56db7fb4df2a95"
]
]
},
{
"id": "e86ddc32e2b3b383",
"type": "change",
"z": "7e86bbcb4d2deeb3",
"d": true,
"name": "",
"rules": [
{
"t": "set",
"p": "payload.name",
"pt": "msg",
"to": "req.body.name",
"tot": "msg"
},
{
"t": "set",
"p": "payload.name1",
"pt": "msg",
"to": "req.body.name1",
"tot": "msg"
},
{
First of all, I'm not a programmer, sometimes when I have a project I try to "program" a little, in the end I really like it. But my area is networks, anyway. Come on.
I'll explain what my project does.
I want to fill out a form and host the images via dropzone, then send this data to pdf..
The system is already doing almost everything, I fill in the form, I host the images via dropzone, I can save everything inside a folder and I can create a pdf file with the data, so I can't send the images inside the PDF... .. I wanted an idea of how I can do this, could someone give me the way????
Inside the template there is an html form, the data is being received by {{}}... I would like to send the images to the "visit information in images" form.. how would it be?? I already thank everyone on the forum for making me get here with my project!! Thank you very much, below I will send my code. Thanks!!!
I'm using NODE-RED
below I send the flow to you. Thanks
[
{
"id": "7e86bbcb4d2deeb3",
"type": "tab",
"label": "Flow 19",
"disabled": false,
"info": "",
"env": []
},
{
"id": "cf3c5eef33930225",
"type": "ui_template",
"z": "7e86bbcb4d2deeb3",
"group": "a4f1b6144f9c6973",
"name": "Pagina",
"order": 1,
"width": 6,
"height": 15,
"format": "<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>\n<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />\n\n\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">\n</script>\n\n<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>\n\n\n<script>\n function auto_height(elem) { /* javascript */\nelem.style.height = "1px";\nelem.style.height = (elem.scrollHeight)+"px";\n}\n\n</script>\n\n\n\n<script>\n //dropzone config\n\nvar adPhotosDropzone = new Dropzone("#enviadropzone", {\n autoProcessQueue: false,\n maxFilesize: 8,\n addRemoveLinks: true,\n //previewsContainer: null,\n //clickable: false,\n parallelUploads: 50,\n dictDefaultMessage: "<h1>Adicione as fotos aqui</h1>"\n\n});\n\n</script>\n\n\n\n\n<! Css para text >\n\n\n<style>\n.auto_height {\n/* CSS */\nwidth: 65%;\n\n\n}\n/*css para input text*/\n.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:50%}\n\n/* css para o dropdown */\n.w3-input2{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:70%}\n\n.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}\n\n\n/*css para text e textarea*/\n\ntextarea:focus, input[type=text]:focus, select:focus, datetime:focus {\nbackground-color: lightblue;\n}\n\n\n/*css para select */\n\n/* select {\nwidth: 70%;\npadding: 16px 20px;\nborder: none;\nborder-radius: 4px;\nbackground-color: #f1f1f1;\n\n\n\n}\n*/\n\n</style>\n\n\n\n \n\n<script type="text/javascript">\n theScope = scope;\n (function(scope) {\n \n } );\n \n (scope);\n\n\n // if (adPhotosDropzone.getAcceptedFiles().length > 0) {\n\n $(document).ready(function() {\n \n //$("#form1").on("submit", function(){ \n $("#form1").on("submit", function(event) {\n\t\t//$('form').on('submit', function(event) {\n if (adPhotosDropzone.getAcceptedFiles().length > 0) {\n\n\t\t\tevent.preventDefault();\n\t\t\t\n\t\t\t// It returns a array of object\n\t\t\tlet userinfo = $(this).serializeArray();\n\t\t\tlet user = {};\n\t\t\tuserinfo.forEach((value) => {\n\t\t\t\t\n\t\t\t\t// Dynamically create an object\n user[value.name] = value.value;\n\t\t\t});\n\t\t\tlet url = "envia_tudo";\n\t\t\t$.ajax({\n\t\t\t\tmethod: "POST",\n\t\t\t\turl: url,\n\t\t\t\tdata: user\n\t\t\t}).done(function(msg) {\n //dropzone//\n \n // enable auto process queue after uploading started\n adPhotosDropzone.options.autoProcessQueue = true;\n // queue processing\n adPhotosDropzone.processQueue();\n \n adPhotosDropzone.on("queuecomplete", function() {\n adPhotosDropzone.options.autoProcessQueue = false;\n //alert("Eu sou um alert!");\n adPhotosDropzone.removeAllFiles();\n })\n\t\t\t\t\n \n //apaga dados digitados;\n document.getElementById("form1").reset();\n\n\n\t\t\t\t// When the request is successful\n theScope.send({payload: 'Fotos e dados enviado com sucesso!'});\n \n\n \n\n\n\t\t\t}).fail(function(err, textstatus, error) {\n theScope.send({payload: 'ERRO, REFAÇA POR FAVOR!'});\t\t\t});\n }\n\n\n else{\n theScope.send({payload: 'Por favor, adicione foto!'});\n }\n \n\t\t});\n\n \n\t});\n\n \n\n // else{\n\n // alert("Eu sou um alert!");\n\n\n </script>\n\n\n <form id="form1" name="form1" class="form1"> \n \n <p>\n <label>Cliente*</label> <br>\n <select class="w3-input2" id="cliente" name="cliente" required>\n <option value="">--Por favor, selecione cliente--</option>\n <option value="clientecristal">Cristal Tower</option>\n <option value="clientebritannia">Condominio Britannia</option>\n <option value="clientemillennium">Millennium</option>\n </select>\n \n </p>\n\n<br>\n \n <p>\n <label>Nome cliente*</label>\n <input required="required" class="w3-input" type="text" name="nomecliente" id="nomecliente">\n </p>\n <br>\n <p>\n <label>Data e hora*</label>\n <input type="datetime-local" class="w3-input" id="datahora" name="datahora" required>\n </p>\n <br>\n <p>\n <label>Qual serviço?*</label> <br>\n <select class="w3-input2" id="tiposervico" name="tiposervico" required> \n <option value="">--Por favor, selecione serviço--</option>\n <option value="visitapreventiva">Manutenção preventiva</option>\n <option value="visitatecnica">Visita tecnica</option>\n \n </select>\n\n </p>\n <br>\n \n\n\n \n <label>Descreva serviço realizado*</label>\n <textarea rows="4" required="required" name="descricaoservico" class="auto_height" id="descricaoservico" oninput="auto_height(this)"></textarea>\n \n\n <br>\n \n\n </form>\n\n<!--\n <form action="/envia-dropzone" class="dropzone" enctype="multipart/form-data" id="enviadropzone">\n \n \n \n </form>\n-->\n\n\n<br>\n\n\n<!-- botão fora do form, apenas colode id no form e atribua no button -->\n\n\n<div style="text-align:center;">\n<md-button form="form1" class="enviar" type="submit"style="width: 250px; height:40px;">Enviar</md-button>\n</md-button> \n</div> \n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 520,
"y": 220,
"wires": [
[
"bc56db7fb4df2a95"
]
]
},
{
"id": "e86ddc32e2b3b383",
"type": "change",
"z": "7e86bbcb4d2deeb3",
"d": true,
"name": "",
"rules": [
{
"t": "set",
"p": "payload.name",
"pt": "msg",
"to": "req.body.name",
"tot": "msg"
},
{
"t": "set",
"p": "payload.name1",
"pt": "msg",
"to": "req.body.name1",
"tot": "msg"
},
{
Felipe
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)