Upload file to Node.js with HTML

Question

I'm trying to make an API to upload file using Node.js server. I get undefined response.

I am following this tutorial https://www.youtube.com/watch?v=UtfZ-5WKpro

Node.js:

var express = require('express');

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

app.use(bodyParser.json());

app.post("*", function(req, res) {
  res.end(JSON.stringify(req.files) + "\n");
});

console.log("Server at 8080");
app.listen(8080);

HTML

<html>
  <head>
    <form method="post"
          enctype="multipart/form-data"
          action="http://localhost:8080">
      <input type="file" name="myimage" />
      <input type="submit" name="submit" value="submit"/>
    </form>
  </head>
</html>

After clicking submit I got undefined response.

Quentin · Accepted Answer · 2016-11-08 09:37:26Z

5

bodyParser.json()

… so you've set up a parser for JSON formatted requests

 enctype="multipart/form-data"

… but you aren't making a JSON formatted request.

See the documentation for body-parser:

This does not handle multipart bodies, due to their complex and typically large nature. For multipart bodies, you may be interested in the following modules:

… which is followed by a list of suggestions.

Pick a module which can handle multipart requests and use that instead of your current choice.

answered Nov 8, 2016 at 9:37

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Nhan · Accepted Answer · 2016-11-08 10:25:32Z

I recommend you to use this module for handling file upload in Node/Express.

var fileupload = require('fileupload').createFileUpload('/uploadDir').middleware;

app.post('/upload', fileupload, function(req, res) {
  // files are now in the req.body object along with other form fields
  // files also get moved to the uploadDir specified
});

Another way to upload files could be using something like this

Jade template

form.data(action='/user/register', method='post', class="long-fields", enctype='multipart/form-data')
  input(type="text" name="name")
  input(name='fileLogo', type='file')
  input(type="submit" value="Register")

Controller

formidable = require('formidable'); //file upload handling via form
uuid = require('node-uuid'); //Unique ID
path = require('path'); //Path compiler
fs = require('fs'); //FileSystem

var form = new formidable.IncomingForm();
form.keepExtensions = false;
form.maxFieldsSize = 2 * 1024 * 1024; //2mb

form.parse(req, function(err, fields, files) {

  console.log(fields);
  console.log(files);

  fs.readFile(files.fileLogo.path, function (err, data) {
    var pathNew = __dirname + '/../../uploads/' + uuid.v1() + path.extname(files.fileLogo.name);

    fs.writeFile(pathNew, data, function (err) {
      console.log('uploaded', pathNew);
    });
  });

  res.send(jade.renderFile(settings.pathLess + prefix + '/register.jade', {
    req: req
  }));

});

Collectives™ on Stack Overflow

Upload file to Node.js with HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related