node.js

[ghost]

Hello,

I see the demo code, but am not sure how to use this code with my angular/node.js stuff.

I am guessing I need to support a route /upload, but am unsure what that means with this code.

Looks great!

Thanks,
Evan

[danialfarid]

Have a look at this one #67
Your server side code would be similar to uploading file using a normal html form.
You can find samples on stackoverflow.

[ghost]

Hello,

Ok making progress. But an error on my node.js side

NodeJS: foo log request: /uploads
TypeError: path must be a string
at Object.fs.open (fs.js:418:11)
at Object.fs.readFile (fs.js:206:6)
at fileupload (c:\foo\server\routes.js:207:8)
at callbacks (c:\foo\node_modules\express\lib\router\index.js:164:37)
at logme (c:\foo\server\routes.js:170:12)
at callbacks (c:\foo\node_modules\express\lib\router\index.js:164:37)
at param (c:\foo\node_modules\express\lib\router\index.js:138:11)
at pass (c:\foo\node_modules\express\lib\router\index.js:145:5)
at Router._dispatch (c:\foo\node_modules\express\lib\router\index.js:173:5)
at Object.router (c:\foo\node_modules\express\lib\router\index.js:33:10)
fileupload in routes.js
Uploaded filename is: undefined
continue
POST /uploads 500 16ms

I have the UI from your sample in my code, and can browser to a file and it shows up as the name of the file in the browser. And then the "auto" upload seems to fire as my route /uploads fires and my fileupload function in node.js gets hit. However, there is no filename. Here is the code I have modified on the client, followed by the node.js code to see the file name.

Thanks for the help!!
Evan

angular.module('app')
.controller('FileUploadCtrl', ['$scope', '$upload', function($scope, $upload) {
$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];
$scope.upload = $upload.upload({
url: '/uploads', //upload.php script, node.js route, or servlet url
// method: POST or PUT,
// headers: {'headerKey': 'headerValue'},
// withCredentials: true,
data: {myObj: $scope.myModelObj},
test:"hello",
file: file,
// file: $files, //upload multiple files, this feature only works in HTML5 FromData browsers
/* set file formData name for 'Content-Desposition' header. Default: 'file' /
//fileFormDataName: myFile, //OR for HTML5 multiple upload only a list: ['name1', 'name2', ...]
/ customize how data is added to formData. See #40#issuecomment-28612000 for example */
//formDataAppender: function(formData, key, val){} //#40#issuecomment-28612000
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
//.error(...)
//.then(success, error, progress);
}
// $scope.upload = $upload.upload({...}) alternative way of uploading, sends the the file content directly with the same content-type of the file. Could be used to upload files to CouchDB, imgur, etc... for HTML5 FileReader browsers.
};
}]);

and on the node.js side I have

function fileupload(req, res) {
// fs.readFile(req.files.myFile.path, function (err, data) {
console.log("fileupload in routes.js");
console.log("Test argument is: " + req.test);
if (!(req.file === undefined)) {
console.log("Uploaded filename is: " + req.file);
}
console.log("continue");
fs.readFile(req.file, function (err, data) {
// ...
var newPath = __dirname + "/uploads/flsUPLOADworked";
console.log(" the filename is: " + req.file);
console.log(" target filename is: " + newPath);
fs.writeFile(newPath, data, function (err) {
//...
});
});
}

[ghost]

Looks like I don't understand the encoding of the file/data in the request/response object. How do I access the filename and data in the object. I figure there may be two cases a single file or multiple files.

[danialfarid]

have a look at #67

[danialfarid]

There is a wiki page for node.js sample:
https://github.com/danialfarid/angular-file-upload/wiki/node.js-example