Multer Error: TypeError: Cannot read property 'originalname' of undefined

JavaScript
1

I have passed a multipart form from HTML but on backend it doesn’t show up. I am posting all my files in the order of execution:

HTML form:

<form class="d-f-r" action="/mechanical/add_cad" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" class="upload-box" required>
    <input id="version_number" type="number" name="iteration" placeholder="Version No."
        required>
    <input id="remarks" type="text" name="remarks" placeholder="Remarks">
    <input type="submit" value="Upload">
</form>

index.js

const express = require('express');
const router = express.Router();
// some get and post requests
router.use('/mechanical', require('./mechanical'));
// some more get and post requests
module.exports = router;

mechanical.js

const express = require('express');
const router = express.Router();
const mechanicalController = require('../controller/mechanicalController');

router.post('/add_cad' ,mechanicalController.add_cad);

module.exports = router;

mechanicalController.js

const azure = require('azure-storage');
const CAD = require('../models/cad');
const sponsor = require('../models/sponsors');

module.exports.add_cad = function (req, res) {
    const cad = new CAD();
    CAD.uploadedLogo(req, res, async function (err) {
        console.log(req.file.originalname, '\n', req.body);
        var blobService = azure.createBlobService();
        var containerName = 'cad';
        blobService.createBlockBlobFromLocalFile(containerName, `${req.file.originalname}`, `${req.file.path}`, function (err, result, response) { });

        var cadUrl = blobService.getUrl(containerName, `${req.file.originalname}`);
        cad.remarks = req.body.remarks;
        cad.iteration = req.body.iteration;
        cad.location = cadUrl;
        cad.posted_by = req.user.user;
        cad.save();
        res.redirect('back');
    });
};

cad.js (my schema)

const mongoose = require('mongoose');
const multer = require('multer');
const path = require('path');
const LOGO_PATH = path.join('/assets/imgs/sponsors');

const CADSchema = new mongoose.Schema({
    iteration: {
        type: Number,
        required: true,
    },
    remarks: {
        type: String,
    },
    location:{
        type: String,
        required: true
    },
    posted_by:{
        type: String,
        required: true
    }
}, {
    timestamps: true
});

let storage = multer.diskStorage({
    destination: function (req, file, cb) {
        console.log(LOGO_PATH);
        cb(null, path.join(__dirname, '..', LOGO_PATH));
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    }
});

CADSchema.statics.uploadedLogo = multer ({storage: storage}).single('location');

const CAD = mongoose.model('cad_list', CADSchema);
module.exports = CAD;

I have been trying to debug this for a few days now with no progress.
Please help me out. Let me know if you need any additional information.

2

do you have more details on the TypeError? from which file does it originate? what line?

3

Sorry I forgot to include that. Here’s the error

/home/krush/github/defianz_site/controller/mechanicalController.js:8
        console.log(req.file.originalname, '\n', req.body);
                             ^

TypeError: Cannot read property 'originalname' of undefined
    at /home/krush/github/defianz_site/controller/mechanicalController.js:8:30
    at Array.<anonymous> (/home/krush/github/defianz_site/node_modules/multer/lib/make-middleware.js:53:37)
    at listener (/home/krush/github/defianz_site/node_modules/on-finished/index.js:169:15)
    at onFinish (/home/krush/github/defianz_site/node_modules/on-finished/index.js:100:5)
    at callback (/home/krush/github/defianz_site/node_modules/ee-first/index.js:55:10)
    at IncomingMessage.onevent (/home/krush/github/defianz_site/node_modules/ee-first/index.js:93:5)
    at IncomingMessage.emit (node:events:381:22)
    at endReadableNT (node:internal/streams/readable:1307:12)
    at processTicksAndRejections (node:internal/process/task_queues:81:21)
[nodemon] app crashed - waiting for file changes before starting...
4

I have no knowledge of CAD, but here try to console.log req, as req.file is undefined

5

CAD is nothing but my schema. and I have logged my req and req.file but sadly didn’t reach anywhere with it.

console.log(req.file):

 undefined 
 [Object: null prototype] {}

i have the console.log(req) also but instead of pasting here I have it as a link

6

I don’t see a file property anywhere there, that may be why req.file is undefined

and nowhere there is an originalname either

7

I think problems might be in one of these two places:

  • form (maybe multer is not able to parse the multipart form properly). but then there nothing wrong in the HTML form code (as far as I know)
  • multer setup: maybe this part of multer setup is not working properly
8

Solved the issue. The name in the form input has to be same as the one in multer. So I changed this part of code:

CADSchema.statics.uploadedLogo = multer ({storage: storage}).single('location');

to this:

CADSchema.statics.uploadedLogo = multer ({storage: storage}).single('file');

so it matches the form input name attribute for file:

    <input type="file" name="file" class="upload-box" required>
1 Like
9

Thank you so much for this solution! I was stuck on this for some time😅

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.