Search code examples
javascriptnode.jsformidable

upload image error using node-formidable


I was learning "The Node beginner book" and doing the practice in the book, the practice is to present a picture which was uploaded by user. it's an example wrote with node-formidable, code as below:

var formidable = require('formidable'),
http = require('http'),
util = require('util');

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });
    return;
  }

  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
}).listen(8888);

I run it with node filename.js, then I open my browser located to http://localhost:8888/upload, comes something as below:

enter image description here

I enter a name and choose a file, then it comes as below:

enter image description here

I click the upload button, the response as below:

received upload:

{ fields: { title: 'Hello Wolrd' },
  files: 
   { upload: 
      File {
        domain: null,
        _events: {},
        _eventsCount: 0,
        _maxListeners: undefined,
        size: 37417,
        path: '/tmp/upload_a306115e1e630a0c548b6d820fe803cb',
        name: 'myfile_icon_file_4.png',
        type: 'image/png',
        hash: null,
        lastModifiedDate: 2016-10-11T03:52:41.052Z,
        _writeStream: [Object] } } }

how to get the property path? why does a word File created there?


Solution

  • The property path is available on the File object, which formidable defines in its code. As your example is written, your form.parse function is giving you a map of File objects called files (go figure). Therefore, if you wanted to get the path value to the file you just uploaded, you would do the following (using the key upload since that's what your html input's name is):

    var pathToFile = files['upload'].path;

    Remember, this is only going to be available server side with the way your example is written, so for you to get the path like this you would put that line of code within your form.parse function.

    The printout you are giving in your example is from the response, which is what the client is getting. The util.inspect you are using to format your response is explicitly converting both the fields and files objects to string representations for debugging/inspection purposes, so that's why you can't access them as a variable on the client side. If you use the line I wrote above or the line notion suggested, it will access path as long as it is inside your form.parse function where files exists within scope.