Upload camera file using angular js to sails.js server - angularjs

Question

I'm trying to make a simple file upload using angular and sails.i am fairly new to all of these technolegies.could any of you please tell me what is wrong with my code?
I have created an api called file using the command: "sails generate api file" in my sails server and in the controller i pasted this code(https://github.com/sails101/file-uploads/blob/master/api/controllers/FileController.js#L15):
/**
* FileController
*
* #description :: Server-side logic for managing files
* #help :: See http://links.sailsjs.org/docs/controllers
*/
module.exports = {
/**
* `FileController.upload()`
*
* Upload file(s) to the server's disk.
*/
upload: function (req, res) {
// e.g.
// 0 => infinite
// 240000 => 4 minutes (240,000 miliseconds)
// etc.
//
// Node defaults to 2 minutes.
res.setTimeout(0);
req.file('avatar')
.upload({
// You can apply a file upload limit (in bytes)
maxBytes: 1000000
}, function whenDone(err, uploadedFiles) {
if (err) return res.serverError(err);
else return res.json({
files: uploadedFiles,
textParams: req.params.all()
});
});
},
/**
* `FileController.s3upload()`
*
* Upload file(s) to an S3 bucket.
*
* NOTE:
* If this is a really big file, you'll want to change
* the TCP connection timeout. This is demonstrated as the
* first line of the action below.
*/
s3upload: function (req, res) {
// e.g.
// 0 => infinite
// 240000 => 4 minutes (240,000 miliseconds)
// etc.
//
// Node defaults to 2 minutes.
res.setTimeout(0);
req.file('avatar').upload({
adapter: require('skipper-s3'),
bucket: process.env.BUCKET,
key: process.env.KEY,
secret: process.env.SECRET
}, function whenDone(err, uploadedFiles) {
if (err) return res.serverError(err);
else return res.json({
files: uploadedFiles,
textParams: req.params.all()
});
});
},
/**
* FileController.download()
*
* Download a file from the server's disk.
*/
download: function (req, res) {
require('fs').createReadStream(req.param('path'))
.on('error', function (err) {
return res.serverError(err);
})
.pipe(res);
}
};
next, i have made a function that takes a photo and displays it.now what i want to do is to send that file into my server and store it. here is my code:
$scope.sendPost = function() {
getPosts.getFoo('http://10.0.0.3:1337/user/create?name=temporaryUser&last_name=temporaryLastName4&title=' +
shareData.returnData()[0].title + '&content=' + shareData.returnData()[0].content +
'&image=' + /*shareData.returnData()[0].image*/ + '&category1=' + category1 + '&category2=' +
category2 + '&category3=' + category3 + '&category4=' + category4 + '&category5=' + category5
).then(function(data) {
$scope.items = data;
console.log(shareData.returnData()[0]);
});
$scope.upload = function() {
var url = 'http://localhost:1337/file/upload';
var fd = new FormData();
//previously I had this
//angular.forEach($scope.files, function(file){
//fd.append('image',file)
//});
fd.append('image', shareData.returnData()[0].image);
$http.post(url, fd, {
transformRequest:angular.identity,
headers:{'Content-Type':undefined
}
})
.success(function(data, status, headers){
$scope.imageURL = data.resource_uri; //set it to the response we get
})
.error(function(data, status, headers){
})
}
}

Answer 1

Most of your codes are correct I think, but one thing which is very important that you should give the same "Name" of the data both on your front-end and the back-end.
In your case, the upload data name inside your back-end codes is "avatar":
req.file('avatar')
.upload({
// You can apply a file upload limit (in bytes)
maxBytes: 1000000
}, function whenDone(err, uploadedFiles) {
if (err) return res.serverError(err);
else return res.json({
files: uploadedFiles,
textParams: req.params.all()
});
});
However, inside the front-end codes the post data name is "image".
fd.append('image', shareData.returnData()[0].image);
I think this is should be the major issue which stopped your application.
Here's a working version of how to use angular to upload file remotely than API http://jsfiddle.net/JeJenny/ZG9re/ which is working for me.
Below is my backend codes for you reference:
// myApp/api/controllers/FileController.js
module.exports = {
upload: function(req, res) {
var uploadFile = req.file('file')
//console.log(uploadFile);
uploadFile.upload({
dirname: sails.config.zdbconf.attachmentPath,
maxBytes: 100000000
}, function(err, files) {
if (err)
return res.serverError(err);
return res.json({
message: files.length + ' file(s) uploaded successfully!',
files: files
});
});
}
};