1

I am trying to learn Node's multer library, which is useful for uploading files though API calls,
I have a basic express application setup listening to port 4300,
Used multer's diskStorage function to define the file system location where I want the uploaded files to get stored.

And exposed 3 endpoints -
1st for accepting single file upload, keyname - singleFile
2nd for accepting an array of files for a key name, keyname - multipleFiles
3rd for accepting an array of single/array files for different key names.

I am referring the following-
1. https://www.npmjs.com/package/multer
2. https://medium.com/@bmshamsnahid/nodejs-file-upload-using-multer-3a904516f6d2

var express = require('express')
var cors = require('cors')
var multer  = require('multer')
var async = require('async')

var app = express();
app.use(cors());
app.listen(4300, function () {
    console.log('listening on port 4300!');
});


var storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, '/home/user/Desktop/node/')
    },
    filename: (req, file, cb) => {
      cb(null, file.fieldname + '-' + Date.now())
    }
});
var upload = multer({storage: storage});

app.post('/single', upload.single('singleFile'), function (req, res, next) {
    console.log(req.file.filename);
    res.send({'message': 'File received! k thnkx bye!'});
});

app.post('/multiple', upload.array('multipleFiles', 3), function (req, res, next) {
    console.log(req.files);

    async.each(req.files, function (temp, callback) {
       console.log(temp);
    }, function (err) {
       if (err) {
           console.log('Error ' + err);
       } else {
        console.log('Success');
       }
    });

    res.send({'message': 'Files received! k thnkx bye!'});
});

var cpUpload = upload.fields([{ name: 'singleFile', maxCount: 1 }, { name: 'multipleFiles', maxCount: 3 }])
app.post('/fields', cpUpload, function (req, res, next) {
    console.log(req);
    res.send({'message': 'Files received! k thnkx bye!'});
});

Following is the API call made using Postman tool - 1. Single file upload API- enter image description here

2. Multiple files upload API- enter image description here

I am getting "TypeError: Cannot read property 'filename' of undefined" on the console.logs for some mistake probably.

Debug Console-

/home/user/.nvm/versions/node/v10.11.0/bin/node --inspect-brk=10250 Node-Tutorials/Apps/multer.js 
Debugger listening on ws://127.0.0.1:10250/87170633-e582-4ac5-b099-0d2e6d090a7f
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
listening on port 4300!
TypeError: Cannot read property 'filename' of undefined
    at /home/user/office/node-crud-app/Node-Tutorials/Apps/multer.js:23:26
    at callbacks (/home/user/office/node-crud-app/node_modules/express/lib/router/index.js:164:37)
    at multerMiddleware (/home/user/office/node-crud-app/node_modules/multer/lib/make-middleware.js:18:41)
    at callbacks (/home/user/office/node-crud-app/node_modules/express/lib/router/index.js:164:37)
    at param (/home/user/office/node-crud-app/node_modules/express/lib/router/index.js:138:11)
    at pass (/home/user/office/node-crud-app/node_modules/express/lib/router/index.js:145:5)
    at Router._dispatch (/home/user/office/node-crud-app/node_modules/express/lib/router/index.js:173:5)
    at Object.router [as handle] (/home/user/office/node-crud-app/node_modules/express/lib/router/index.js:33:10)
    at next (/home/user/office/node-crud-app/node_modules/connect/lib/proto.js:193:15)
    at cors (/home/user/office/node-crud-app/node_modules/cors/lib/index.js:188:7)

Can someone please help fix my code, to download the files on the file system?

4
  • Can you please post us the HTML of the upload page?
    – Sridhar
    Commented Nov 5, 2018 at 12:59
  • @Sridhar updated the question, added screenshot of API requests
    – Dev1ce
    Commented Nov 5, 2018 at 13:04
  • Your code works fine in my laptop. I reproduced the error you reported by making a POST call without attaching any file. Can you check is this the case?
    – Sridhar
    Commented Nov 5, 2018 at 18:35
  • Can you share the request screenshot? I get an "TypeError: Cannot read property 'filename' of undefined " on the localhost:4300/single API and "undefined" on the localhost:4300/multiple API
    – Dev1ce
    Commented Nov 8, 2018 at 7:31

2 Answers 2

0

"TypeError: Cannot read property 'filename' of undefined" on the console.logs for some mistake probably.

This could be possible if the file is empty.

error message when not uploading a file

Handling the case,

'use strict';

var express = require('express')
var cors = require('cors')
var multer = require('multer')
var async = require('async')

var app = express();
app.use(cors());
app.listen(4300, function () {
  console.log('listening on port 4300!');
});


var storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads')
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now())
  }
});
var upload = multer({storage: storage});

const params = {
  '/single': 'file',
  '/multiple': 'files'
};

function validate(req, res, next) {
  let param = params[req.url];
  if (!req[param]) {
    return res.send({
      errors: {
        message: `${param} cant be empty`
      }
    });
  }
  next();
}

app.post('/single', upload.single('singleFile'), validate, function (req, res, next) {
  console.log(req.file.filename);
  res.send({'message': 'File received! k thnkx bye!'});
});

app.post('/multiple', upload.array('multipleFiles', 3), validate, function (req, res, next) {
  console.log(req.files);

  async.each(req.files, function (temp, callback) {
    console.log(temp);
  }, function (err) {
    if (err) {
      console.log('Error ' + err);
    } else {
      console.log('Success');
    }
  });

  res.send({'message': 'Files received! k thnkx bye!'});
});

var cpUpload = upload.fields([{name: 'singleFile', maxCount: 1}, {name: 'multipleFiles', maxCount: 3}])
app.post('/fields', cpUpload, function (req, res, next) {
  console.log(req);
  res.send({'message': 'Files received! k thnkx bye!'});
});

Should handle the empty file upload.

3
  • added your validate function and parameter in the API code, gives me "File cant be empty" in both cases :/
    – Dev1ce
    Commented Nov 8, 2018 at 8:01
  • ah worked, for /multiple and /fields I do the same? added validate function as param?
    – Dev1ce
    Commented Nov 8, 2018 at 8:07
  • @AniruddhaRaje updated the code to handle multiple file as well :)
    – Sridhar
    Commented Nov 8, 2018 at 8:13
0

try consoling req.files.filename.

I found filename in req.files.filename.

Correction - req.files is array of object.

4
  • hmmm I think if it's req.files, it should be an array shouldn't it? I mean req.files = [ {...}]
    – Kai
    Commented Nov 5, 2018 at 9:44
  • @Manish same code? I get the same error on the /single API and undefined on /multiple API
    – Dev1ce
    Commented Nov 5, 2018 at 9:45
  • @AniruddhaRaje use async.each on req.files and console inside async.
    – Manish
    Commented Nov 5, 2018 at 9:50
  • still getting "undefined" in console log, I've updated the code with async.
    – Dev1ce
    Commented Nov 5, 2018 at 9:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.