How to attach file to post request nodejs? - node.js

Question

I am using nodejs for file upload. I am trying something like this below link. But not getting how to post the stuff. I need to post the JSON data along with the file. How can I do?
function myCtrl() {
//an array of files selected
$scope.files = [];
//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
alert("file selected:")
$scope.$apply(function () {
//add the file object to the scope's files collection
$scope.files.push(args.file);
});
});
//the save method
$scope.save = function(filename) {
$http({
method: 'POST',
url: "http://localhost:3000/uploadfile",
headers: { 'Content-Type': false },
//This method will allow us to change how the data is sent up to the
//server for which we'll need to encapsulate the model data
//in 'FormData'
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
for (var i = 0; i < data.files; i++) {
//add each file to the form data and iteratively name them
formData.append("file" + i, data.files[i]);
}
return formData;
},
//Create an object that contains the model and files which will
//be transformed in the above transformRequest method
data: {files: $scope.files }
}).
success(function (data, status, headers, config) {
alert("success!:"+JSON.stringify(data));
}).
error(function (data, status, headers, config) {
alert("failed!:"+JSON.stringify(data));
});
};
}
Here is my angular directive "file-upload", I used to recognize the selected files to upload.
angular.module('myApp', []).directive('file-upload', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be
//specified on the element
for (var i = 0;i<files.length;i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};
});
I am using on ng-click I am calling save(). Not working. What is the problem?

Answer 1

I don't see any ng-click in your code.
The correct way is to bind to "change" event which seems like that's what you are doing.
You can use the lightweight angular-file-upload library which does what you are looking for with a directive.
It also support IE9 with flash polyfill since IE9 doesn't support FormData.
<script src="angular.min.js"></script>
<script src="angular-file-upload.js"></script>
<div ng-controller="MyCtrl">
<input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>
JS:
//inject angular file upload directive.
angular.module('myApp', ['angularFileUpload']);
var MyCtrl = [ '$scope', '$http', function($scope, $http) {
$scope.onFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var $file = $files[i];
$http.uploadFile({
url: 'my/upload/url',
file: $file
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
}
}];