How do I upload a file using node js?

Question

I have looked around and looked at various tutorials on how to upload a file using node/express. I feel like I am doing something wrong on either the HTML or JQuery side. I am using the following link as a http://howtonode.org/really-simple-file-uploads.

However I am getting the error:

TypeError: Cannot read property 'fileUpload' of undefined    at module.exports.fileCreate 

Here is my code below:

uploadcontroller.js

fs.readFile(req.files.fileUpload.path, function (err, data) {
    var newPath = __dirname + "/uploads/" + imgString;
    fs.writeFile(newPath, data, function (err) {
    });
});

html snippet

<div class="form-group">
    <label for="fileUpload">Upload File</label>
    <input type="file" name="fileUpload" id="fileUpload">
</div>

I am using the Sails framework (not sure if that makes difference)

Edit: Complete Form

<form role="form" class="uploadFileForm">
    <div class="form-group">
        <label for="fileTitleInput">Title</label>
        <input type="text" name="formTitleInput" id="formTitleInput">
    </div>
    <div class="form-group">
        <label for="fileDescriptionInput">Description</label>
        <textarea class="form-control" rows="4" id="fileDescriptionInput"></textarea>
    </div>
<div class="form-group">
        <label for="fileUpload">Upload File</label>
        <input type="file" name="fileUpload" id="fileUpload">
    </div>
    <button type="submit" class="btn btn-default" id="file-submit-btn">Publish to Web</button>
</form>

Answer 1

app.post('/upload', function(req, res) {

    fs.readFile(req.files.image.path, function (err, data) {

        var imageName = req.files.image.name

        /// If there's an error
        if(!imageName){

            console.log("There was an error")
            res.redirect("/");
            res.end();

        } else {

          var newPath = __dirname + "/uploads/fullsize/" + imageName;

          /// write file to uploads/fullsize folder
          fs.writeFile(newPath, data, function (err) {

            /// let's see it
            res.redirect("/uploads/fullsize/" + imageName);

          });
        }
    });
});

Answer 2

I ran into the same problem. Sails did not recognize req.files (undefined). So your problem seems very much Sails related. The following solved my problem (especially the Skipper documentation).

In the 0.9 version of Sails, you can uncomment this line in the config/express.js file: // bodyParser: require('express').bodyParser,

In the 0.10 version, use req.file instead of req.files. See their beta documentation on file uploads: http://beta.sailsjs.org/#/documentation/reference/Upgrading

Be sure to check out the Skipper documentation as well: https://github.com/balderdashy/skipper. Most likely your version of Sails will use this to process the file uploads.

Answer 3

app.post('/', function(req, res) {
  console.log(req.files);
  fs.readFile(req.files.displayImage.path, function (err, data) {

    var newPath = __dirname + "/uploads/"+req.files.displayImage.name;
    fs.writeFile(newPath, data, function (err) {
      if (err) throw err;
      res.redirect("back");
    });
  });
});

Just for your reference, "console.log(req.files)" would contain something like this:

{ displayImage:
   { domain: null,
     _events: null,
     _maxListeners: 10,
     size: 84654,
     path: 'E:\\Users\\xyz\\AppData\\Local\\Temp\\90020831e2b84acb2d4851e4d4
2d77d5',
     name: 'ccc - 1.jpg',
     type: 'image/jpeg',
     hash: false,
     lastModifiedDate: Wed May 22 2013 07:47:39 GMT+0530 (India Standard Time),
     _writeStream:
      { domain: null,
        _events: null,
        _maxListeners: 10,
        path: 'E:\\Users\\xyz\\AppData\\Local\\Temp\\90020831e2b84acb2d4851e
4d42d77d5',
        fd: 4,
        writable: false,
        flags: 'w',
        encoding: 'binary',
        mode: 438,
        bytesWritten: 84654,
        busy: false,
        _queue: [],
        _open: [Function],
        drainable: true },
     length: [Getter],
     filename: [Getter],
     mime: [Getter] }
}