Uploading file with multer in nodejs returns req.file undefined and empty req.body-CodePudding

So, I have a problem with uploading files with multer in nodejs. After my first tries there was just no return and no file in my destination folder. I logged the body to check and it returns [Object: null prototype] {}. Return of req.file is undefined.

my route file: workflow.js

var express = require('express');
var router = express.Router();

const multer = require('multer')

var storage = multer.diskStorage({
  destination: function (request, file, callback) {
      callback(null, "./public/data/satelliteimage/");
  },
  filename: function (request, file, callback) {
      fileName=file.originalname;
      callback(null, file.originalname);
  }
});

const uploadDest = multer({storage:storage})


router.get('/', function (req, res, next) {
  res.render('workflow');
});


router.post("/uploadSatelliteimage", uploadDest.single("satellitenbildInput"), function (req, res, next) {
  console.log(req.file);
  console.log(req.body);

  res.render('workflow');
})


module.exports = router;

my view file: workflow.pug

extends layout

block content
    br
    br
    .container
        .row.justify-content-md-center
            .col-md-3
            .col-md-6
                div#form_div_sat.active-form
                    form(action='/workflow/uploadSatelliteimage' method='post' enctype="multipart/form-data")
                        label.col-md-4.col-form-label.fw-bolder(for='satellitenbild') Satellitenbild
                        input#satellitenbildInput.form-control.form-control-lg(type='file' name="satellitenbild" accept="image/png")
                        button#btn_satellite.btn.btn-primary.mb-2 Weiter
                br
                br
                br
            .col-md-3
        .row.justify-content-md-center
            .col-md-1 
            .col-md-4 
                div#form_div_train
                    form
                        label.col-md-4.col-form-label.fw-bolder(for='trainModell') Trainiertes Modell
                        input#trainMod.form-control.form-control-lg(type='file' name="trainModell" accept=" " enctype="multipart/form-data" disabled=true)
                    button#btn_trainMod.btn.btn-secondary.mb-2.disabled Weiter
            .col-md-2 
                br
                br
                h3.text-center oder
            .col-md-4 
                div#form_div_untrain
                    form
                        label.col-md-4.col-form-label.fw-bolder(for='untrainModell') Nicht-trainiertes Modell
                        input#untrainMod.form-control.form-control-lg(type='file' name="untrainModell" accept=" " enctype="multipart/form-data" disabled=true)
                    button#btn_untrainMod.btn.btn-secondary.mb-2.disabled Weiter
                br
                div#form_div
                    form
                        input#testR.form-control(type='text' name="testR", disabled = '')
                        button.btn.btn-secondary.mb-2(type='submit').disabled AOA berechnen
            .col-md-1

block scripts 
  script(src="/javascripts/workflowJS.js" defer)

I googled a lot and found some stackoverflow questions but the answers didn't help me. My guesses are, that it has something to do with body-parser, but that's only for text and multer should be the right one. Or the order of the forms, body is not populated yet? Or something completely different.

I hope to find a solution with your help. Thanks!

CodePudding user response：

The name of the upload file field must be identical on both frontend and backend, and you have a mismatch here:

server:

uploadDest.single("satellitenbildInput"),

frontend:

name="satellitenbild" accept="image/png"

so, instead of satellitenbildInput and satellitenbild, they need to match:

server:

uploadDest.single("satellitenbildInput"),

frontend:

name="satellitenbildInput" accept="image/png"

Also, you seem to be uploading multiple files, but from different fields: trainModell and untrainModell, so you'll need to use .fields method, where for every file field you provide an object with file field name, in an array, and also the files would be stored in req.files, so your route should look like this:

router.post("/uploadSatelliteimage", uploadDest.fields([{
    name: 'satellitenbildInput',
    maxCount: 1
}, {
    name: 'trainModell',
    maxCount: 1
}, {
    name: 'untrainModell',
    maxCount: 1
}]), function(req, res, next) {
    console.log(req.files);
    console.log(req.body);

    res.render('workflow');
})