Search code examples
javascriptnode.jsexpressmulterbody-parser

Node Js - Internal Server Error while uploading file using HTML as UI

I am following this tutorial for NodeJs https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm . While running this example, I am facing this problem Internal Server Error.

Here is HTML code :

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />

      <form action = "http://127.0.0.1:8050/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>

   </body>
</html>

Here is NodeJs code :-

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'})).single('file'));//I have added this, this is also a mistake by them (tutorialpoint.com)

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;

   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ){
            console.log( err );
            }else{
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8050, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

Here is my Log:-

Example app listening at http://localhost:8050
TypeError: Cannot read property 'file' of undefined
    at C:\Users\devuser\Desktop\nodejsPrograms\filenew\server.js:17:25
    at Layer.handle [as handle_request] (C:\Users\devuser\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\devuser\node_modules\express\lib\router\route.js:131:13)
    at Route.dispatch (C:\Users\devuser\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\devuser\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\devuser\node_modules\express\lib\router\index.js:277:22
    at Function.process_params (C:\Users\devuser\node_modules\express\lib\router\index.js:330:12)
    at next (C:\Users\devuser\node_modules\express\lib\router\index.js:271:10)
    at Immediate.<anonymous> (C:\Users\devuser\node_modules\multer\lib\make-middleware.js:53:37)
    at Immediate.immediate._onImmediate (timers.js:440:18)
Solution

  • From the docs

    .single(fieldname)
    Accept a single file with the name fieldname. The single file will be stored in req.file.

    Change req.files.file to req.file, and it will work. file is not the name of the field, but for single upload instead of files.