Nodejs and express an error while loading the file ", it is impossible to read the undefined property"

Question

EDIT: === For clarity, I want to upload a file to the server, be it an image or a little .txt ===

I looked at other common problems like this, but could not alleviate my problem.

The goal is to create file upload functionality. The front end is as follows:

<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 a form type and all the jazz settings.

The .js server processing the mail request is as follows:

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

Please note that I also have the following:

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

as well as the functionality needed to call the exports.upload export function.

The export.upload function looks something 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"); // }); //}); } 

Many things are commented out as I tried to use different methods to make it work. I can call it using JSON Stringify as an entire object, but I would like it to be an object that I can plunge into and get information, for example, I would like to know the file type by dividing its name by ..:

 req.files.thumbnail.thumbs.name 

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

THINGS RECEIVED:

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

using JSON Stringyfy to access specific parts of an object. (returns undefined)

smashing my head on the keyboard. (returns undefined)

changing the enctype form to a few different things, however most of the answers here say that form data is the best enctype for file uploads.

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

Answer 1

I did not understand why you saved the input name as "thumbnails [thumb]". You must 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 on 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"); }); }); }); 

req.files is json that provides details of the loaded request.

Hope this helps.

Answer 2

Just for others, visit this link using express 4.X. Multi-page middleware is no longer supported. You need to use other middleware, such as multi-part or multiter.

ref: TypeError: Cannot read the 'image' property from undefined