I am trying to post images using ne-file-upload, which works fine, but when I try to add text to it, it doesn't send along with the text.
HTML
<h2>Photo Uploads</h2>
<p>This is where photos are uploaded. You can upload a single photo or multiple photos if needed.</p>
<div class="button btn-sm btn btn-default" ngf-select ng-model="files" name="files" ngf-multiple="true">Select</div>
<input type="text" name="event" ng-model="event">
<button type="submit" ng-click="submit()">submit</button>
<pre>{{ event | json }}</pre>
<hr>
Angular - Here the angular is uploading the files which is fine but when I try to add the event:$scope.event to the data it does not seem to send it.
//FOR MULTIPLE FILES
$scope.uploadFiles = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
Upload.upload({
url: 'api/admin/photos',
data: {'event': $scope.event,files: files[i]}
}).then(function(resp){
$log.info(resp.config.data.event);
$scope.photos.push(resp.data,resp.config.data.event);
//$log.info(resp.data);
$log.info($scope.photos);
getPhotos();
},
function(resp){
console.log('Error status: ' + resp.status);
},
function(evt){
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name);
$scope.progress = progressPercentage;
$log.info($scope.progress);
});
}
}
};
NodeJS - would I have to make changes to the storage here?
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/img')
},
filename: function (req, file, cb) {
//cb(null, file.originalname + '-' + Date.now())
console.log(req.body);
req(req.body);
cb(null, file.originalname)
}
});
var upload = multer({ storage: storage });
//upload photos
apiRoutes.post('/admin/photos',upload.array('files',20),function(req,res){
console.log(req.body);
for (var i = 0; i < req.files.length; i++) {
console.log(req.files[i].originalname);
//this is to see the other section of photos
console.log('the real deal');
var photo = new Photos({
url: req.files[i].filename,
name: req.files[i].filename,
//event: req.body
});
photo.save(function(err,docs){
if(err) throw err;
});
};
res.json(req.files);
});
Hi i was in the trouble same with you.
Solution was easy
In the gitgub, the developers said
Specify the file and optional data to be sent to the server.
Each field including nested objects will be sent as a form data multipart.
Samples: {pic: file, username: username}
{files: files, otherInfo: {id: id, person: person,...}} multiple files (html5)
{profiles: {[{pic: file1, username: username1}, {pic: file2, username: username2}]} nested array multiple files (html5)
{file: file, info: Upload.json({id: id, name: name, ...})} send fields as json string
{file: file, info: Upload.jsonBlob({id: id, name: name, ...})} send fields as json blob, 'application/json' content_type
{picFile: Upload.rename(file, 'profile.jpg'), title: title} send file with picFile key and profile.jpg file name*/
*data: {key: file, otherInfo: uploadInfo},/*
https://github.com/danialfarid/ng-file-upload#npm
So all you have to do is just put the text data in the ng-file json request
here this is my case
$scope.submit = function()
{
Upload.upload({
url: serverip+'/make_item',
data: {file: $scope.file,asd:"asd"}
}).then(function (data) {
console.log(data);
});
};
(i just put the asd for the test)
and the result comes like this
i put the important data in req
headers:
{ host: '52.78.68.136',
connection: 'keep-alive',
'content-length': '4366',
accept: 'application/json, text/plain, */*',
origin: 'null',
'user-agent': 'Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36',
authorization: 'file',
'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryIIep9fVUqmCV1Bg7',
'accept-encoding': 'gzip, deflate',
'accept-language': 'ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4' },
and this is req.file
file:
{ fieldname: 'file',
originalname: 'KakaoTalk_20160719_004110244.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: './public/img/item_img',
filename: '1471176191895.jpg',
path: 'public/img/item_img/1471176191895.jpg',
size: 4067 } }
finally req.body
body: { asd: 'asd' },
it works
please ask me anything else.