File Upload nodejs, angularjs : Form mistake? - angularjs

Question

I have a multer file upload which does nothing, it doesn't even give me an error. My opiniion is that this is a form mistake, that the html form can't tell the angular controller to send the http post to the nodejs
upload.html
<form id="uploadForm" ng-submit="ctrl.submit">
Select File1: <input type="file" name="file" onchange="angular.element(this).scope().ctrl.selectFile1(this.files)">
<p></p>
Select File2: <input type="file" name="file" onchange="angular.element(this).scope().ctrl.selectFile2(this.files)">
<p></p>
<br>
<input type="submit" value="Upload" id="submit" class="btn btn-primary" ng-click="ctrl.submit()">
</form>
AngularJS Controller
ctrl.js
var file1 = '';
var file2 = '';
this.selectFile1 = function(files){
file1 = files[0];
this.files = files;
}
this.selectFile2 = function(files){
file2 = files[0];
this.files = files;
}
this.upload = function(){
var fd = new FormData();
var file = self.fileArray;
fd.append('file1', file1);
fd.append('file2', file2);
$http.post("/upload", fd, {
transformRequest: angular.identity,
headers: {"Content-Type": undefined}
}).then(function success(response){
if(response.status == 200){
console.log('success');
}
console.log(response);
}, function error(response){
console.log(response);
})
}
NodeJS Backend
test.js
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '../uploads');
},
filename: function (req, file, cb) {
cb(null, file.originalname);
},
});
var upload = multer({ storage : storage}).array('file', 2);
router.post('/upload', function(req, res){
upload(req, res, function(err){
if(err){
console.log(err);
return res.end(err);
}
console.log(req.files);
res.sendStatus(200);
});
});
I can save the files from html to the angular controller and save them to the form data but when I send the form data with an array of 2 files to the nodejs backend I get an empty form data in the backend.
SOLUTION:
in nodejs file changed var upload = multer({ storage : storage}).array(...) to var upload = multer({ storage : storage}).any();

Answer 1

You can use onchange to select the file.
<input type="file" name="file" onchange="angular.element(this).scope().selectFile(this.files)"/>
<button ng-click="savePhoto()">Save </button>
In angular controller
xx.controller('yourcontroller', function($scope, $http){
$scope.selectFile = function (files) {
$scope.files = files;
};
$scope.savePhoto = function () {
var fd = new FormData();
fd.append("file", $scope.files[0]);
)) ;
$http.post("/xxx/photos", fd, {
withCredentials: true,
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
}).success(function (data) {
$scope.image = data; // If you want to render the image after successfully uploading in your db
});
};
});