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

score 1 · Answer 1 · answered Jul 01 '20 at 11:09

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.

answered Jul 01 '20 at 11:09

Chris Clark

488
2
19

also the "file" is undefined: – Ayoob Nabwani Jul 01 '20 at 13:13

score 1 · Answer 2 · answered Jul 01 '20 at 11:18

1

try

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

answered Jul 01 '20 at 11:18

Ahmed Magdy

1,054
11
16

score 0 · Answer 3 · answered Jul 02 '20 at 15:16

0

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

answered Jul 02 '20 at 15:16

Ayoob Nabwani

11
3

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

3 Answers3