I get undefined value when uploading image using multer and vaadin-upload (polymer)

Question

I'm using polymer on the client-side and as the image upload button:

<vaadin-upload
  form-data-name="file"
  max-files="1"
  id="fileUploadImage"
  method="POST"
  headers='{"Authorization": "bearer {{auth}}", "Content-Type": "multipart/form-data; boundary=XXXX"}'
  target="{{config_endpoint}}/rest/upload_file/uploadFile"
  nodrop
>
</vaadin-upload>

on server side I'm using multer for uploading the image:

const express = require("express");
const multer = require("multer");
var cors = require("cors");
const config = require("../../config");

const router = express.Router();
var corsOptions = {
  origin: config.origin, // '*'
  optionsSuccessStatus: 200
};
router.use(cors(corsOptions));

var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "../../uploads");
  },
  filename: function(req, file, cb) {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, file.fieldname + "-" + uniqueSuffix);
  }
});

var uploads = multer({ storage: storage });

router.post("/uploadFile", uploads.single("file"), (req, res) => {
  console.log(req.files);
  console.log(req.body);
});
module.exports = router;

for both req.files and req.body I got undefined values, see logs:

13:54:44 0|eod  | OPTIONS /rest/upload_file/uploadFile 200 0 - 0.553 ms
13:54:44 0|eod  | undefined
13:54:44 0|eod  | {}

I'm using the following versions: "multer": "^1.4.2", nodejs v8.9.3

Here are my headers" click here

what's wrong ? what I missed? btw, even using Postman I got the same issue

Answer 1

Try console.log(req.file) instead of (req.files), since you're using uploads.single('file'). The request is stored on files (with an "s") only when you're using more than one. It should be on "file" otherwise (when it's a single upload). I think that might be what's happening here.

Answer 2

try

router.use(express.json());//this is required if you are sending data as json
router.use(express.urlencoded({extended:false}));

Answer 3

OK, I found the issue.. After removing the header (except the auth) it works! ("Content-Type" can't be setting manually - because we using boundary, and on the server-side it looking for the auto-generated boundary).

looks like it's Vaadin-upload bug