Bill Bill - 1 year ago 326
Javascript Question

Cannot read property of undefined - Ajax POST

I'm trying to post data (uploading a music file) from ajax which then should save the data into my mongodb when I click on the 'upload' button. However, i keep getting fieldname is undefined. I think somewhere in my code, it is not picking up the data.

$('#upload').on('click', function(){
var formData = new FormData($('#file')[0].files[0]);

url: 'http://localhost:3000/api/',
method: 'POST',
// data: {
// file: $('#file')[0].files[0]
// },
data: formData,
contentType: false,
processData: false,
mimeType: "multipart/form-data",
success: function(data){ //if successful upon grabbing data
console.log('Created music')
var id = $('<p>').text("Id:" + data[i]._id);
var title = $('<p>').text("Title:" + data[i].originalname);
var play = $('<button>').data('Data-id', data[i]._id).text('Play').on('click', playSong); //creates edit button with donut id and carries a function editDonut in which we will define later

var del = $('<button>').data('Data-id', data[i]._id).text('Delete').on('click', deleteMusic);
var container = $('<div>').attr('Data-id', data[i]._id);
$(container).append(id, title, play, del);
// $('#new-form').hide();


<form id="new-form">
<input id="file" type="file" name="uploads">
<button id="upload">Upload</button>

Backend in Express - apiRouter.js

var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/uploads/'); //UPLOAD MUSIC PATH
filename: function (req, file, cb) {
var originalname = file.originalname;
var extension = originalname.split(".");
filename = + '.' + extension[extension.length-1];
cb(null, filename);
});'/', multer({storage: storage}).single('uploads'), function(req,res){
var music = new Music ({
fieldname: req.file.fieldname,
originalname: req.file.originalname,
encoding: req.file.encoding,
mimetype: req.file.mimetype,
destination: req.file.destination,
filename: req.file.filename,
path: './uploads/' + req.file.filename,//req.file.path, //PATH TO PLAY MUSIC
size: req.file.size
if (err){console.log(err)}
else {

in Express - app.js

app.use('/api', apiRouter);

Error in the terminal

TypeError: Cannot read property 'fieldname' of undefined
at /Users/will/pulse-express2-passport/config/apiRouter.js:72:24
at Layer.handle [as handle_request] (/Users/will/pulse-express2-passport/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/will/pulse-express2-passport/node_modules/express/lib/router/route.js:131:13)
at Array.<anonymous> (/Users/will/pulse-express2-passport/node_modules/multer/lib/make-middleware.js:52:37)
at listener (/Users/will/pulse-express2-passport/node_modules/on-finished/index.js:169:15)
at onFinish (/Users/will/pulse-express2-passport/node_modules/on-finished/index.js:100:5)
at callback (/Users/will/pulse-express2-passport/node_modules/ee-first/index.js:55:10)
at IncomingMessage.onevent (/Users/will/pulse-express2-passport/node_modules/ee-first/index.js:93:5)
at emitNone (events.js:86:13)
at IncomingMessage.emit (events.js:185:7)
at endReadableNT (_stream_readable.js:934:12)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)

Answer Source

The FormData constructor expects a form, from which it extracts the keys (element names) and values from. Pass the form instead of the file to the constructor.

var formData = new FormData($('#new-form')[0]);

Or you can create an empty FormData object and then add the value to it.

var formData = new FormData();
formData.append('uploads', $('#file')[0].files[0]);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download