In the front end, I used Dropzonejs to create a drag and drop file system.
<form class="dropzone" name="fileupload" id="droparea" action="/" method="post"
enctype="multipart/form-data">
<div class="dz-message needsclick dragText dz-progess">
<div class="icon"><i class="far fa-file-pdf fa-2x"></i></div><br>
Click or Drag & Drop to Upload Files
</div>
</form>
In the back end, I require multer and try to use it to get the uploaded files.
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const pdfmerge = require("easy-pdf-merge");
const multer = require("multer");
const app = express();
const fileStorage = multer.diskStorage({
destination: function(req,res,cb){
cb(null, "files/");
},
filename: function(req,file, cb){
cb(null, file.originalname);
}
});
const upload = multer({storage:fileStorage});
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
app.get("/", function(req, res){
res.render("index");
});
app.post("/", upload.single("fileupload"), function(req,res){
console.log("server ok");
console.log(req.file);
})
app.listen(3000, function() {
console.log("Server started on port 3000");
});
In my form, I did not include any input tag (the form tag with dropzone is sufficent) and I want to use Multer to get the files uploaded to the form. I tried to use "upload.single("fileupload")", which is using the name of the form instead of the input tag but it couldnt work. Is there any way I can get the files ? If I use upload.any(), the req.file will return undefined but the file will be uploaded to my file folders. How can I access the files ?