backup for multer

Rev1/node/index.js

@@ -1,13 +1,13 @@
 const express = require("express");
 const path = require("path");
-const fileUpload = require("express-fileupload");
+// const fileUpload = require("express-fileupload");
 const routes = require("./views/routes");
 
 const PORT = 3000;
 
 // Init App
 const app = express();
-app.use(fileUpload());
+// app.use(fileUpload());
 app.set("view engine", "pug");
 // Static Files
 app.use(express.static("public"));

Rev1/node/public/js/signer.js

@@ -0,0 +1,32 @@
+console.log("Hello from signer");
+
+// script.js
+const form = document.getElementById("form");
+
+form.addEventListener("submit", submitForm);
+
+function submitForm(e) {
+  e.preventDefault();
+  const mainFile = document.getElementById("mainFile");
+  const imgFiles = document.getElementById("imgFiles");
+  const xpos = document.getElementById("xpos");
+  const ypos = document.getElementById("ypos");
+  const sf = document.getElementById("sf");
+  const formData = new FormData();
+  formData.append("xpos", xpos.value);
+  formData.append("ypos", ypos.value);
+  formData.append("sf", sf.value);
+  formData.append("files", mainFile.files[0]);
+  for (let i = 0; i < imgFiles.files.length; i++) {
+    formData.append("files", imgFiles.files[i]);
+  }
+  fetch("http://localhost:3000/invoice_sign/upload_files", {
+    method: "POST",
+    body: formData,
+    headers: {
+      //   "Content-Type": "multipart/form-data",
+    },
+  })
+    .then((res) => console.log(res))
+    .catch((err) => ("Error occured", err));
+}

Rev1/node/routes/invoice_sign.js

@@ -126,4 +126,17 @@ router.get("/download", function (req, res) {
   );
   res.download(downloadFile, function (err) {});
 });
+
+const multer = require("multer");
+const upload = multer({ dest: "./public/upload/raw" });
+// router.use(express.json());
+// router.use(express.urlencoded({ extended: true }));
+
+router.post("/upload_files", upload.array("files"), uploadFiles);
+function uploadFiles(req, res, next) {
+  console.log(req.body);
+  console.log(req.files);
+  res.json({ message: "Successfully uploaded files" });
+}
+
 module.exports = router;

Rev1/node/views/index.pug

@@ -1,7 +1,4 @@
 extends layout.pug
-block scripts
-  script(src='/jquery.js')
-  script(src='/pets.js')
 
 block content
   h1 hello world from index

Rev1/node/views/invoice_sign.pug

@@ -1,60 +1,29 @@
 extends layout.pug
 block head 
-    //- link(href='css/invoice.css' rel='stylesheet')
 block content
-
-    //- form(action='/upload_files', enctype='multipart/form-data',class='form-windowed')
-    //-     .input-group
-    //-         label(for="name") Your name 
-    //-         input(name="name", id='name', placeHolder="Enter your name")
-    //-     .input-group
-    //-         label(for="file", class="btn") Select File
-    //-         input(type='file', name='uploadFile')
-    //-         input(type='submit', name='uploadFile', value='Upload')
-    //- .text-center
-    //- .text-center.mb-4.w-75.container
-    //-     form(action='/upload_files', enctype='multipart/form-data',class='form-windowed')
-    //-         .m-3
-    //-             label.form-label.file-upload-wrapper(for='formFile') Default file input example
-    //-             input#formFile.form-control(type='file')
-    //-         .m-3
-    //-             label.form-label(for='formFileMultiple') Multiple files input example
-    //-             input#formFileMultiple.form-control(type='file' multiple='')
-    //-         .m-3
-    //-             label(for="exampleInputEmail1") Email Address 
-    //-             input.form-control(type="email")
-    //-         .m-3
-    //-             button.btn.btn-primary(type="submit") Confirm
-    //-     .bg-light.container
-    //-         h3 Last Files
-    //-         ul.list-group
-    //-             each file in lastFiles
-    //-                 form(method='get',action='/invoice_sign/download')
-    //-                         input.list-group-item.list-group-item-action(type='submit', name='downloadFile', value=file.name)
-    
     .container
         .row
             .col-sm-8
                 h3 Invoice Signer
-                form(action='/upload_files', enctype='multipart/form-data',class='form-windowed')
+                form#form
                     .m-3
                         label.form-label.file-upload-wrapper(for='formFile') Choose a file to embed an image
-                        input#formFile.form-control(type='file',accept=".pdf,.zip",required='')
+                        input#mainFile.form-control(type='file',accept=".pdf,.zip",required='')
                     .m-3
                         label.form-label(for='formFileMultiple') Add images if you don't want to use default sign and stamp
-                        input#formFileMultiple.form-control(type='file' multiple='',accept=".jpg,.png")
+                        input#imgFiles.form-control(type='file' multiple='',accept=".jpg,.png")
                     .m-3
                         .container
                             .row
                                 .col
                                     label(for="xpos") X Position
-                                    input.form-control(type="number",required='',value="50")
+                                    input#xpos.form-control(type="number",required='',value="50")
                                 .col
                                     label(for="ypos") Y Position
-                                    input.form-control(type="number",required='',value="50")
+                                    input#ypos.form-control(type="number",required='',value="50")
                                 .col
                                     label(for="scalefactor") Scale Factor
-                                    input.form-control(type="number",required='',value="1.0")
+                                    input#sf.form-control(type="number",required='',value="1.0")
                     .m-3.text-start
                         button.btn.btn-primary(type="submit") Confirm
             .col-sm-4
@@ -64,5 +33,4 @@ block content
                         each file in lastFiles
                             form(method='get',action='/invoice_sign/download')
                                     input.list-group-item-primary.list-group-item.list-group-item-action(type='submit', name='downloadFile', value=file.name)
-
-
+    script(src='js/signer.js')

Rev1/node/views/layout.pug

@@ -1,3 +1,4 @@
+doctype html
 html
   head
     title Anka-Anvil - #{title}
@@ -7,8 +8,7 @@ html
       link(href='css/bootstrap.min.css' rel='stylesheet')
       link(href='css/bootstrap.rtl.css' rel='stylesheet')
       link(href='css/bootstrap.rtl.min.css' rel='stylesheet')
-    block scripts
-      script(src='js/jquery.js')
+
   body
     .d-flex.h-100
       .cover-container.d-flex.w-100.h-100.p-3.mx-auto.flex-column
@@ -22,3 +22,5 @@ html
           .mt-auto
             #footer
           //- p some footer content
+    block scripts
+      script(src='js/jquery.js')