HTML + Node.js File Upload

Question

Please help me out resolving this. I get empty values as result .

HTML Code

<form method="post" enctype="multipart/form-data" action="/file-upload">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="file" name="thumbnail">
    <input type="submit">
</form>

Node.js

var express = require('express');
var http = require('http');
var request = require('request');
var bodyParser = require('body-parser');    

var app = express();
app.use(express.static(__dirname + '/app/'));

// parse urlencoded request bodies into req.body
app.use(bodyParser.urlencoded({ extended: true }));

var server = app.listen(8080,function(){
 console.log("Node.js image upload");
});

app.post('/file-upload', function(req, res, next) {
 console.log(req.body);
 console.log(req.files);
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Success\n');
});

Ketha Kavya · Accepted Answer · 2015-11-13 11:50:08Z

2

You can use npm module formidable to serve the form multipart data. The below is an example:

 app.post('/file-upload', function(req, res, next) {
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, fields, files) {
    console.log('form parse');
  });

 form.on('field',function(name,value){
    console.log('in field',name,value);//gives you the field names with value
  });
  form.on('file',function(name,value){
   console.log('in file');
  });

   form.on('end', function(fields, files) {
     this.openedFiles[x].path; //gives the file path
   });
});

answered Nov 13, 2015 at 11:50

Ketha Kavya

5886 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vmkcom · Accepted Answer · 2015-11-13 09:47:47Z

1

body-parser can't handle multipart/form-data

You should use something like multer or busboy

handling multipart/form-data requires some complex logic, every package for handling it having a lot of settings

answered Nov 13, 2015 at 9:47

vmkcom

1,67812 silver badges17 bronze badges

Comments

Andrius · Accepted Answer · 2015-11-13 09:53:23Z

1

You're having problems because of enctype="multipart/form-data" in the form. You will need to install the multer package to handle those.

Basic usage is this:

//Include the package
var multer  = require('multer');
var uploadTmp = multer({ dest: 'uploads/' });

// Use a middleware to handle files
app.post('/file-upload',uploadTmp.single('thumbnail'), function(req, res, next) {

answered Nov 13, 2015 at 9:53

Andrius

5,94922 silver badges28 bronze badges

Collectives™ on Stack Overflow

HTML + Node.js File Upload

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related