nodejs and express error when uploading file, “can

Question

EDIT: === For clarity, I am looking to upload a file to the server, be it a picture or a bit of .txt ===

I've looked around at other common problems similar to this but have been unable to alleviate my problem.

The purpose is to create file upload functionality. The front end looks like this:

<div class="holdingDiv">
    <form action="/file-upload" name="upload" class="dropzone dz-clickable" id="dropzoneArea" enctype="multipart/form-data">
        <input style="display:none" type="file" name="thumbnail[thumbs]" />                      
        <button id="uploadSubmitter" class="btn btn-primary btn-large" type="submit">Finished</button>
    </form>
</div>

I have the form type and all that jazz setup.

The server.js that handles the post request looks like this:

app.post('/file-upload', imports.upload);

Note that I also have the following required:

//needed for forms
app.use(express.bodyParser()); 

aswell as funcionality necessary to call imports.upload exports function.

the exports.upload function looks a like this:

exports.upload = function (req, res) {
    console.log('FIRST TEST: ' + JSON.stringify(req.files));

    console.log('second TEST: ' +req.files.thumbnail.thumbs.name);
    //get the file extenstion:
    //console.log('size' + req.files.thumbnail.size);
  //  console.log('test this: ' + req.files.thumbnail.name);
   // var fileExtension = JSON.stringify(req.files);

    //console.log('Im getting this file type: '+ fileExtension.name);
   // console.log('this: '+req.files.upload);

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

A lot of stuff is commented out as I was trying different methods to get it to work. I can call it with JSON Stringify as a whole object, but I would like it as an object that I can dip into and get information from, for example I would like to know a files' type by splitting its name by '.':

req.files.thumbnail.thumbs.name

but when i try this (even JSON Stringyfied) it says it is undefined.

THINGS I HAVE TRIED:

Moving the whole function to app.js (there is a small login function that works using req.body, I assumed this may fix it.

using JSON Stringyfy to get at specific parts of the object. (returns undefined)

smashing my head against the keyboard. (returns undefined)

changing the form enctype to several different things, however most of the answers on here state that form-data is the best enctype for file uploads.

Any help and pointers as to why this is happening would be much appreciated!!

Answer 1

Just for others visit this link using express 4.X. "multipart" middleware is not supported anymore. You need to use other middleware such as "multiparty" or "multer".

ref: TypeError: Cannot read property 'image' of undefined

Answer 2

I didn't understand why you kept the name of input as "thumbnails[thumb]". You have to add the method = "POST" to your form.

I changed the name attribute to "theFile" and here is the html

<div class="holdingDiv">
  <form action="/file-upload" name="upload" class="dropzone dz-clickable" id="dropzoneArea" enctype="multipart/form-data" method = "post">
    <input  type="file" name="theFile" />                      
    <button id="uploadSubmitter" class="btn btn-primary btn-large" type="submit">Finished</button>
  </form>
</div>

Now in your node js server do this.

app.post('/file-upload',function(req,res){
    console.log('FIRST TEST: ' + JSON.stringify(req.files));
    console.log('second TEST: ' +req.files.theFile.name);
    fs.readFile(req.files.theFile.path, function (err, data) {
        var newPath = "/home/path/to/your/directory/"+req.files.theFile.name;
        fs.writeFile(newPath, data, function (err) {
          res.send("hi");  
        });
    });
});

the req.files is a json which give the details of the uploaded request.

Hope this helps.