We Keep Coding

MulterError: Unexpected field (Upload image in formdata)

I am trying to upload a image file but get the same error on server side no matter what I try, If someone can please tell me what I am missing.
javascript:
const filePicker = document.getElementById('takePhoto');
const myFile = filePicker.files[0];
var formData = new FormData;
formData.append('myFile', myFile)
fetch(appURL+'onlineHelp/questionImage', {
method: 'POST',
body: formData
})
Formdata posting up:
myFile: (binary)
server side
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'upload/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
var upload = multer({storage: storage});
onlineHelp.post('/questionImage', upload.single("myFile"), (req, res, next)=>{
res.send("received")
next(
})
error:
MulterError: Unexpected field
at wrappedFileFilter (C:\Users\annet\Documents\ALS homeworx API\node_modules\multer\index.js:40:19)
at Busboy.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\multer\lib\make-middleware.js:114:7)
at Busboy.emit (events.js:198:13)
at Busboy.emit (C:\Users\annet\Documents\ALS homeworx API\node_modules\busboy\lib\main.js:38:33)
at PartStream.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\busboy\lib\types\multipart.js:213:13)
at PartStream.emit (events.js:198:13)
at HeaderParser.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\dicer\lib\Dicer.js:51:16)
at HeaderParser.emit (events.js:198:13)
at HeaderParser._finish (C:\Users\annet\Documents\ALS homeworx API\node_modules\dicer\lib\HeaderParser.js:68:8)
at SBMH.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\dicer\lib\HeaderParser.js:40:12)

I using this code to upload images or files to server nodejs.
javascript:
const formData = new FormData()
formData.photo = file
var res = await fetch('/your api', {
method: 'PATCH',
body: formData,
})
Server side:
router.patch('/avatar', auth, async (req, res, next) => {
if (req.files) {
let photo = req.files.photo;
if (photo.size < 3000000) {
var random = Math.floor(Math.random() * 9999999 + 10);
if (!photo.mv('./public/uploads/users/avatars/' + random + "_avatar." + photo.name.split('.').pop())) {
return res.status(400).json({ "status": "error", "data": "server cann't upload" });
}
Users.findByIdAndUpdate(req.userId, { $set: { avatar: + random + "_avatar." + photo.name.split('.').pop(), update_in: Date.now() } }, function (err, user) {
if (err) {
return res.status(400).json({ "status": "error", "msg": err });
}
Users.findById(req.userId).select("-password -role -sms -sms_time -__v").exec(function (err, user) {
return res.status(200).json({ "status": "success", "data": user }); //user update shod
});
});
} else {
return res.status(400).json({ "status": "error", "msg": "Photo size should be maximum 3MB" });
}
} else {
return res.status(400).json({ "status": "error", "msg": "Image not found" });
}
});
In server.js app , you should use this code:
const fileUpload = require('express-fileupload');
app.use(fileUpload({
createParentPath: true
}));

I belive you need you present the directory in an object like
cb(null, { fieldName: "temp_upload" });
Also, just something to be aware of, if you plan on this actually being a production app and the file will need to be accessed on the website you will want to look at using an object store of some sort (s3 or other provider) simply because you more then likely have node running as a cluster ( meaning each instance uses it own thread pool and does not talk to the other ) So if a user uploads on instance 1 instance 2 will not know of the file.
Multar has an s3 plugin thats really easy to use but if your just doing point-in-time upload and reading via the node stack (uploading say an xml and then reading the file in the same process you should be ok )

TypeError: Cannot read property 'path' of undefined in Node js while uploading file

I am new to node js.
I was trying to upload a file, it is showing some path error. Below is my code.
var http = require('http');
var formidable = require('formidable');
var fs = require('fs');
http.createServer(function (req, res) {
if (req.url == '/fileupload') {
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
console.log(files);
var oldpath = files.filetoupload.path;
var newpath = '/var/www/html/Node-Js/img/' + files.filetoupload.name;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);
Here I have installed the formidable module.It's installed.
I am getting this below error, please have a look.
/var/www/html/Node-Js/file_upload.js:11
var oldpath = files.filetoupload.path;
^
TypeError: Cannot read property 'path' of undefined
at /var/www/html/Node-Js/file_upload.js:11:40
at IncomingForm.<anonymous> (/var/www/html/Node-Js/node_modules/formidable/lib/incoming_form.js:107:9)
at emitNone (events.js:106:13)
at IncomingForm.emit (events.js:208:7)
at IncomingForm._maybeEnd (/var/www/html/Node-Js/node_modules/formidable/lib/incoming_form.js:557:8)
at Object.end (/var/www/html/Node-Js/node_modules/formidable/lib/incoming_form.js:247:12)
at IncomingMessage.<anonymous> (/var/www/html/Node-Js/node_modules/formidable/lib/incoming_form.js:132:30)
at emitNone (events.js:106:13)
at IncomingMessage.emit (events.js:208:7)
at endReadableNT (_stream_readable.js:1064:12)

You are getting null{} in the console.log(files) is the reason behind this particular error. Filesis coming null so the files.filetoupload will be undefined and that's why files.filetoupload.path can't be found. I would say please find why the files is coming null. Once you will be started getting data in files this error will be solved.

I had the same issue and after looking at the logs I realized that path and name don't exist under that name so try replacing :
var oldpath = files.filetoupload.path;
var newpath = '/var/www/html/Node-Js/img/' + files.filetoupload.name;
with :
var oldpath = files.filetoupload.filepath;
var newpath = '/var/www/html/Node-Js/img/' + files.filetoupload.originalFilename;
This worked for me so I hope it helps

use files[0]
var http = require('http');
var formidable = require('formidable');
var fs = require('fs');
http.createServer(function (req, res) {
if (req.url == '/fileupload') {
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
console.log(files);
var oldpath = files[0].filetoupload.path;
var newpath = '/var/www/html/Node-Js/img/' + files.filetoupload.name;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

I faced same issue and after looking closely into my code, I found that I used different name to get files in server.js then the one I mentioned in html file
I named file element in HTML
name="invoices" // input type=file
In server.js is used
filetoupload
So, if anyone face similar issue please look into your code especially the name given to HTML elements.

how to copy files to remote server using scp2 in node js?

I want to copy the files from local server to remote server in Node js using scp2 package. First of all.. Files uploaded to local server using multer after that copy or move that files to remote server.
My Code:
exports.newFileUpload = function(req , res , next){
var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
var datetimestamp = Date.now();
cb(null, datetimestamp+ '-' +file.originalname);
}
});
var upload = multer({ storage: storage, limits: { fieldSize: 25 * 1024 * 1024 }}).array('file');
upload(req,res,function(err){
console.log(req.body);
console.log(req.files);
if(err){
res.json({error_code:1,err_desc:err});
console.log("Error Occured", err);
return;
}else{
client.scp(req.files[0].path, {
host: 'www.do********.in',
username: 'username',
password: '*********',
path: '/uploads/'
}, function(err) {
console.log(req.files[0].path);
console.log("files uploaded in remote server");
res.json({error_code:0,err_desc:null});
});
}
});
}
file upload to local server is perfectly working, after that to remote server throwing error
Error:
{ date: 'Mon Nov 13 2017 01:00:22 GMT+0530 (India Standard Time)',
process:
{ pid: 5664,
uid: null,
gid: null,
cwd: 'D:\\sample',
execPath: 'C:\\Program Files\\nodejs\\node.exe',
version: 'v8.2.1',
argv: [ 'C:\\Program Files\\nodejs\\node.exe', 'D:\\sample\\app.js' ],
memoryUsage:
{ rss: 69619712,
heapTotal: 45162496,
heapUsed: 39166256,
external: 149849 } },
os: { loadavg: [ 0, 0, 0 ], uptime: 3537.1088452 },
trace:
[ { column: 11,
file: 'util.js',
function: 'Object.exports._errnoException',
line: 1024,
method: '_errnoException',
native: false },
{ column: 20,
file: 'util.js',
function: 'exports._exceptionWithHostPort',
line: 1047,
method: '_exceptionWithHostPort',
native: false },
{ column: 14,
file: 'net.js',
function: 'TCPConnectWrap.afterConnect [as oncomplete]',
line: 1150,
method: 'afterConnect [as oncomplete]',
native: false } ],
stack:[ 'Error: Can\'t set headers after they are sent.',
' at validateHeader (_http_outgoing.js:504:11)',
' at ServerResponse.setHeader (_http_outgoing.js:511:3)',
' at ServerResponse.header (D:\\sample\\node_modules\\express\\lib\\response.js:730:10)',
' at ServerResponse.send (D:\\sample\\node_modules\\express\\lib\\response.js:170:12)',
' at ServerResponse.json (D:\\sample\\node_modules\\express\\lib\\response.js:256:15)',
' at D:\\sample\\routes\\part.js:302:10',
' at Client.closeHandler (D:\\sample\\node_modules\\scp2\\lib\\scp.js:48:13)',
' at emitNone (events.js:105:13)',
' at Client.emit (events.js:207:7)',
' at Client.<anonymous> (D:\\sample\\node_modules\\scp2\\lib\\client.js:88:10)',
' at emitNone (events.js:105:13)',
' at Client.emit (events.js:207:7)',
' at Socket.<anonymous> (D:\\sample\\node_modules\\ssh2\\lib\\client.js:225:10)',
' at emitOne (events.js:115:13)',
' at Socket.emit (events.js:210:7)',
' at Pipe._handle.close [as _onclose] (net.js:549:12)' ] }
Couldn't able to identify the error, awaiting suggestions or possible ways to solve the problem.
Thanks in Advance !

Uploading Files to remote server using multer is not possible directly, But we can play around with multer-sftp, scp, ssh techniques Methodologies
When Uploading Files to remote server using Node Js, We need to take care few things
Username and password should be correct
The Corresponding port number should be open in remote server
The Remote Directory Should have Write Access
Working Code using scp2 to move the files to remote server:
exports.newFileUpload = function(req , res , next){
var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
var datetimestamp = Date.now();
cb(null, datetimestamp+ '-' +file.originalname);
}
});
var upload = multer({ storage: storage, limits: { fieldSize: 25 * 1024 * 1024 }}).array('file');
upload(req,res,function(err){
console.log(req.body);
console.log(req.files);
if(err){
res.json({error_code:1,err_desc:err});
console.log("Error Occured", err);
return;
}else{
client.scp(req.files[0].path, {
host: 'host',
username: 'username',
password: '*********',
path: '/uploads/'
}, function(err) {
console.log(req.files[0].path);
console.log("files uploaded in remote server");
});
}
});
}
Note: Should install required packages as well as declare require things in code.
References: multer-sftp, scp2 , node-ssh

ngFileUpload and Multer - saving uploaded file to a folder

I'm (very) new to angular MEAN and I'm trying to upload a file (pdf, specifically) and save it to server. I know it's probably a stupid question, but I cannot find any example on the server on how to actually save the uploaded file to the server's storage
I'm using ng-file-upload directive from https://github.com/danialfarid/ng-file-upload, Express for server, and ofc, AngularJS for the file upload.
POST UPDATED!! See below
More info: I'm using Yeoman's full mean stack generator for this project
UPDATE:
I've tried using multer (https://github.com/expressjs/multer) to save the uploaded file to server. I got this error when trying to upload the file (it returns 500 error)
Error: Unexpected field
at makeError ({proj_folder}/node_modules/multer/lib/make-error.js:12:13)
at wrappedFileFilter ({proj_folder}/node_modules/multer/index.js:39:19)
at Busboy.<anonymous> ({proj_folder}/node_modules/multer/lib/make-middleware.js:112:7)
at emitMany (events.js:127:13)
at Busboy.emit (events.js:201:7)
at Busboy.emit ({proj_folder}/node_modules/busboy/lib/main.js:31:35)
at PartStream.<anonymous> ({proj_folder}/node_modules/busboy/lib/types/multipart.js:213:13)
at emitOne (events.js:96:13)
at PartStream.emit (events.js:188:7)
at HeaderParser.<anonymous> ({proj_folder}/node_modules/dicer/lib/Dicer.js:51:16)
at emitOne (events.js:96:13)
at HeaderParser.emit (events.js:188:7)
at HeaderParser._finish ({proj_folder}/node_modules/dicer/lib/HeaderParser.js:68:8)
at SBMH.<anonymous> ({proj_folder}/node_modules/dicer/lib/HeaderParser.js:40:12)
at emitMany (events.js:127:13)
at SBMH.emit (events.js:201:7)
updated HTML
<form accept-charset="UTF-8" class="form" name="form" ng-submit="$ctrl.submitForm(form)"
enctype="multipart/form-data">
...
<input ngf-select ng-model="$ctrl.paperFile" ngf-model-options="{allowInvalid: true}" name="paper" ngf-accept="'application/pdf'" required="" type="file" >
...
</form>
submitForm method
...
this.Upload.upload({
url:'/paperUpload',
method: 'POST',
file: this.paperFile,
fields:{
_id:this.user._id
}
})
.then(function(resp){
console.log('Success upload');
console.log(resp.data);
}, function(error){
console.log('fail upload');
console.log(error);
}, function(evt){
console.log('upload on progress');
console.log(evt);
});
Server route:
var express = require('express');
var multer = require('multer');
var router = express.Router();
var upload = multer({dest:'uploads/',
rename: function(fieldname, filename){
return filename+"_"+Date.now();
}});
router.post('/paperUpload', upload.single('paper'), uploadPaper);
...
//method to upload
export function uploadPaper(req,res){
res.status(204).end();
}
The folder 'uploads' is created, but the file is not uploaded and always returned fail
Any help is appreciated,
Thank you

Do these steps
npm install ng-file-upload
include ng-file-upload.min.js in your angular index .html
Use this example to copy form to your angular page from where u want to upload file. -- http://jsfiddle.net/0m29o9k7/
Copy this code outside of any form which is already there:
Change this url from example code to where you want to upload files -- url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
In your server.js or app.js which ever you are using as (node server.js) to start app add these lines
var crypto = require('crypto');
var mime = require('mime');
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'app/app-content/images/')
},
filename: function (req, file, cb) {
crypto.pseudoRandomBytes(16, function (err, raw) {
cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype));
});
}
});
var upload = multer({ storage: storage });
// make '/app' default route
app.post('/', upload.any(), function (req, res) {
res.send(req.files);
});
Change 'app/app-content/images/' this where you want your uploaded file will be
This code points your file upload url to index of your node server.
then you will be able to see the uploaded file.

Try this, I have never seen the 'file' or 'fields' options of Upload.upload. Do you know those are working? I just overcame a similar error by adding the arrayField to my POST call.
if you get the same error try removing 'fields' and adding a new key to the data object with the _id you wish to pass along.
this.Upload.upload({
url:'/paperUpload',
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data ; boundary = ----WebKitFormBoundaryvlb7BC9EAvfLB2q5'
},
arrayKey: '',
data: {
paper: this.paperFile,
},
fields:{
_id:this.user._id
}
})
.then(function(resp){
console.log('Success upload');
console.log(resp.data);
}, function(error){
console.log('fail upload');
console.log(error);
}, function(evt){
console.log('upload on progress');
console.log(evt);
});

Multer throwing weird error while uploading file via ng-file upload

I did some research upon this and I still don't know what is going on here. The google has irrelevant search result or the given error code/message.
Here is my angular controller, simply based upon api code and samples of ng-file upload on ng-file upload.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
console.log("Hey ho from controller");
$scope.uploadFiles = function (files) {
$scope.files = files;
if (files && files.length) {
console.log(files);
Upload.upload({
url: 'api/data/check',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
console.log(response);
});
}, function (response) {
console.log(response);
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
console.log(response);
}
}, function (evt) {
console.log(response);
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
};
}]);
This is the code I have written on the server side.
app.post('/api/data/check', merchants_offer_upload.single('files'), function (req, res, next) {
console.log(req.body.merchantid);
// res.json({status: 0, picarray: array_pic});
});
I have tried this as well, I want these to uploaded in one go so I wanted to use array upload function
app.post('/api/data/check', merchants_offer_upload.array('files'), function (req, res, next) {
console.log(req.body.merchantid);
// res.json({status: 0, picarray: array_pic});
});
This is the complete storage code - server
var merchant_storage = multer.diskStorage({
destination: function (req, file, cb) {
merchant_id = req.params.merchantid;
console.log(merchant_id);
console.log('merchant_id : ', merchant_id);
mkdirp(__dirname + '/images/offers/' + merchant_id, function (err) {
console.log(__dirname);
if (err) console.error(err)
cb(null, __dirname + '/images/offers/' + merchant_id);
});
},
filename: function (req, file, cb) {
var f = Date.now()+'_'+file.originalname;
cb(null,Date.now() + f)
array_pic.push(f);
console.log(f);
console.log(file.originalname);
}
})
var merchants_offer_upload = multer({ storage: merchant_storage });
Now the bad part. Errors!
Errors are thrown when I select files to be uploaded.
Error: Unexpected field
at makeError (C:\nodefiles\new\node_modules\multer\lib\make-error.js:12:13)
at wrappedFileFilter (C:\nodefiles\new\node_modules\multer\index.js:39:19)
at Busboy.<anonymous> (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:109:7)
at Busboy.emit (events.js:118:17)
at Busboy.emit (C:\nodefiles\new\node_modules\multer\node_modules\busboy\lib\main.js:31:35)
at PartStream.<anonymous> (C:\nodefiles\new\node_modules\multer\node_modules\busboy\lib\types\multipart.js:209:13)
at PartStream.emit (events.js:107:17)
at HeaderParser.<anonymous> (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\Dicer.js:51:16)
at HeaderParser.emit (events.js:107:17)
at HeaderParser._finish (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\HeaderParser.js:70:8)
at SBMH.<anonymous> (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\HeaderParser.js:42:12)
at SBMH.emit (events.js:118:17)
at SBMH._sbmh_feed (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\node_modules\streamsearch\lib\sbmh.js:159:14)
at SBMH.push (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\node_modules\streamsearch\lib\sbmh.js:56:14)
at HeaderParser.push (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\HeaderParser.js:48:19)
at Dicer._oninfo (C:\nodefiles\new\node_modules\multer\node_modules\busboy\node_modules\dicer\lib\Dicer.js:198:25)
One thing I must add, not a single console.log part is printed on the
console - which is from the server side, the ones from the controller
of the front end is printed properly.
This is error messages I receive as response on the controller side
controller6.js:12 [File]
angular.js:10661 POST http://localhost:1339/api/data/check 500 (Internal Server Error)(anonymous function) # angular.js:10661sendReq # angular.js:10480status.$get.serverRequest # angular.js:10187processQueue # angular.js:14634(anonymous function) # angular.js:14650parent.$get.Scope.$eval # angular.js:15916parent.$get.Scope.$digest # angular.js:15727parent.$get.Scope.$apply # angular.js:16024(anonymous function) # angular.js:17791completeOutstandingRequest # angular.js:5490(anonymous function) # angular.js:5762
2angular.js:12416 ReferenceError: response is not defined
at controller6.js:30
at angular.js:14716
at Scope.parent.$get.Scope.$eval (angular.js:15916)
at Scope.parent.$get.Scope.$digest (angular.js:15727)
at Scope.parent.$get.Scope.$apply (angular.js:16024)
at done (angular.js:10511)
at completeRequest (angular.js:10683)
at XMLHttpRequest.requestLoaded (angular.js:10624)(anonymous function) # angular.js:12416ident.$get # angular.js:9203(anonymous function) # angular.js:14718parent.$get.Scope.$eval # angular.js:15916parent.$get.Scope.$digest # angular.js:15727parent.$get.Scope.$apply # angular.js:16024done # angular.js:10511completeRequest # angular.js:10683requestLoaded # angular.js:10624
controller6.js:24 Object {data: "Error: Unexpected field<br> at makeEr…s\busboy\node_modules\dicer\lib\Dicer.js:198:25)↵", status: 500, config: Object, statusText: "Internal Server Error"}
controller6.js:27 Object {data: "Error: Unexpected field<br> at makeEr…s\busboy\node_modules\dicer\lib\Dicer.js:198:25)↵", status: 500, config: Object, statusText: "Internal Server Error"}

The answer is that multer do not accept array in ng-upload module.
answer was given by #mscdex on other thread.
Multer not accepting files in array format gives 'Unexpected File Error'
The real answer credit goes to mscdex (https://stackoverflow.com/users/2050455/mscdex)