If I use the example in multer's readme, I can upload a single file without problems. However, when I use the same sample I cannot do so for multiple files. I tried using the regular
Error: Unexpected field
at makeError (/Users/mroker/node_projects/JWT_Auth_Basic/node_modules/multer/lib/make-error.js:12:13)
at wrappedFileFilter (/Users/mroker/node_projects/JWT_Auth_Basic/node_modules/multer/index.js:39:19)
at Busboy. (/Users/mroker/node_projects/JWT_Auth_Basic/node_modules/multer/lib/make-middleware.js:112:7)
at emitMany (events.js:108:13)
at Busboy.emit (events.js:182:7)
HTML
<div class="button btn btn-danger" ngf-select ng-model="files" name="files" ngf-multiple="true">Select</div>
submit
APP.JS
if($scope.files){
console.log('upload multiple works');
console.log($scope.files);
$scope.uploadFiles($scope.files);
}
};
//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: {file: files[i]}
}).then(function(resp){
console.log('Successfully ' + resp.config.data.file.name);
$scope.myPic = resp.config.data.file.name;
},
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.file.name);
})
}
}
};
NODE JS
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/img')
},
filename: function (req, file, cb) {
//cb(null, file.originalname + '-' + Date.now())
cb(null, file.originalname )
}
});
var upload = multer({ storage: storage });
apiRoutes.post('/admin/photos',upload.array('files'),function(req,res){
//save to database
var photo = new Photos({
url: req.file.originalname,
name: req.file.filename
});
photo.save(function(err,docs){
if(err) throw err;
});
console.log(req.files);
console.log(req.file.originalname);
//console.log(req.file.originalname);
res.json(req.files);
});
Lastly when I use an error checking with app.use I get the following node error
{ [Error: Unexpected field]
code: 'LIMIT_UNEXPECTED_FILE',
field: 'file[0]',
storageErrors: [] }
If you upload multiple files and use upload.array('files') then your uploaded files are available in req.files, and this is an array of files.
edit: simple example how to change your code:
apiRoutes.post('/admin/photos',upload.array('files'),function(req,res){
req.files.forEach(function(file) {
//and here you have file.originalname and file.filename
});
});
edit1:
from APP.JS send files in one request:
//FOR MULTIPLE FILES
$scope.uploadFiles = function (files) {
Upload.upload({
url: 'api/admin/photos',
data: {file: files}
});
};
I had to change
data: {file: files}
to
data: {file: files[i}
this solved it.
Change your Upload script in angular
you should send separate object for image and your object name must match in both nodejs and angular js
Use following code
Upload.upload({
url: 'api/admin/photos',
data: somedata,
file_name: file_name
})
For multiple files
Upload.upload({
url: 'api/admin/photos',
data: somedata,
files: files
})
Related
I want to add my uploaded file by ng-file-upload to another data which i sending to my Java backend. I wondering how to do it, when I have to put url in my .upload. In this case that can't work cause sendMail sending firstly file, next the text data. How can I fix it?
$scope.sendMail = function(){
$scope.uploadFiles = function(file) {
$scope.attach = file;
file.upload = Upload.upload({
data: {file: file}
});
}
$scope.emailData = new EmailData();
$scope.emailData.to = "myMail#a.com";
$scope.emailData.from = "yourMail#a.com";
$scope.emailData.type = "TYPE";
$scope.emailData.title = $scope.data.title;
$scope.emailData.descr = $scope.data.description;
$scope.emailData.template = "template";
$scope.emailData.file = $scope.attach;
$http.post("sendemail", $scope.emailData, {headers: {'Content-Type': 'application/json'} })
.then(function (response) {
$scope.succes = true;
},
function(fail) {
$scope.error = true;
});
}
this is example from ng-file-upload Github
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, 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.file.name);
});
};
as you see you can send what you want inside data
use content-type: multipart form/data & make use form-data; have a look at this link https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
I am trying to upload my files with ng file upload but they are uploaded with some different file name on the server.I want them to get saved with the file name they have originally with their correct extension(.jpg,.pdf).
Below is my code.
Controller:
$scope.uploadPic = function (file) {
$scope.advert.userDetails={
"name":userDetails.name,
"email":userDetails.email,
"role":userDetails.role
}
file.upload = Upload.upload({
url: '/api/uploaders/uploads',
method: 'POST',
fields: {
details: $scope.advert
},
file: file,
fileFormDataName: 'photo'
});
file.upload.then(function (response) {
console.log("Postcontroller: upload then ");
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
file.upload.progress(function (evt) {
// Math.min is to fix IE which reports 200% sometimes
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
console.log("PostController: upload progress " + file.progress);
});
file.upload.success(function (data, status, headers, config) {
// file is uploaded successfully
console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);
console.log(data);
});
}
Api:
var multer = require('multer');
var upload = multer({ dest: 'server/uploads/images'});
It's not ng-upload changing the filename, it's multer. This is for security reasons.
In a nutshell, you wouldn't want someone to know the exact path of a file they've uploaded - what if it were malicious? They could potentially execute it.
If you really want, however, you can do this on your API side:
var multer = require('multer');
var storage = multer.diskStorage(
{
destination: 'server/uploads/images',
filename: function (req, file, cb) {
cb(null, file.originalname);
}
}
);
var upload = multer(storage);
I am using this ng-file-upload module and i used ngf-pattern to restrict image file type those only allowable to upload. In case someone upload wrong file type, then, I need to display a box that should show error box to user Invalid file type has been uploaded.
On my below code, for example, I have used supported images file type jpg on ngf-pattern. I should display error in case I upload png file
On the same, I want to display the error on wrong file type is uploaded.
Please help me on this.
HTML CODE
<div ng-controller="AssetsUploadController">
<div class="assetsUploadSection">
<div ngf-drop="uploadFiles($files, $invalidFiles)" class="assets-drop-box" ngf-drag-over-class="assets-dragover" ngf-multiple="true" ngf-pattern="'image/jpg,image/jpeg,videos/*,application/pdf'"><img src="dragDrop.png"/>
<button ngf-select="uploadFiles($files, $invalidFiles)" multiple type="button">Upload Assets</button></div></div>
</div>
Angular code
var app = angular.module('myApp', ['ngFileUpload']);
app.controller('ImageController', function ($scope, Upload,$timeout) {
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, 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.file.name);
});
};
$scope.uploadFiles = function (files) {
$scope.files = files;
console.log('upload files'+ files);
if (files && files.length) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}
});
The following code produces an image in the desired location, however, the image is not being named correctly.
routes.js
var upload = multer({
dest: './client/shared/assets/images/logos',
rename: function (fieldname, filename, req, res) {
console.log('Rename YO!')
console.log(fieldname)
console.log(filename)
console.log(req)
return 'test' + '-'+Date.now();
}
});
app.post('/uploads/logo',upload.single('file'), function(req, res){
console.log('Upload photo yo!')
console.log(req.body) // form fields
console.log(req.file) // form files
res.status(204).end()
});
create.controller.js
$scope.saveLogo = function(file) {
console.log(file);
file.upload = Upload.upload({
url: '/uploads/logo',
method: 'POST',
fields: {
name: $scope.item.name,
subdomain: $scope.item.subdomain
}
});
file.upload.then(function (_res) {
console.log(_res)
file.result = _res.data;
}, function (_res) {
console.log(_res)
if (_res.status > 0)
$scope.errorMsg = _res.status + ': ' + _res.data;
});
file.upload.progress(function (evt) {
// Math.min is to fix IE which reports 200% sometimes
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
};
I don't know what I am missing here. I am trying to limit the multer functionality to a specific post action, could that be it?
Thanks in advance
Solved with this little tidbit:
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '/tmp/my-uploads')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
var upload = multer({ storage: storage })
The approach has changed to the above method since the last release
i want to know, how to use upload files code in sails using angular upload
this is code for angular
var app = angular.module('app', ['angularFileUpload']);
app.controller('ImageCtrl', ['$scope', '$upload', function ($scop
e, $upload) {
$scope.$watch('files', function () {
$scope.upload($scope.files);
});
$scope.upload = function (files) {
window.alert(JSON.stringify(files));
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
$upload.upload({
url: '???????',
fields: {
'username': $scope.username
},
file: file
}).progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' +
evt.config.file.name);
}).success(function (data, status, headers, config) {
console.log('file ' + config.file.name + 'uploaded. Response: ' +
JSON.stringify(data));
});
}
}
};
}]);
in above code , what i should give url ? , my requirement is, i want to upload files in locally using sails mongodb.
Any one please share the server side nodejs code..
Sails have built-in streaming file uploads utility called skipper. In general you can upload files from angular to any sails endpoint. Then you just need to perform something like this in your controller:
req.file('avatar').upload(function (err, uploadedFiles){
if (err) return res.send(500, err);
return res.send(200, uploadedFiles);
});
You can also pass skipper options:
req.file('avatar').upload({
// ...any other options here...
}, ...);
If you aplication should upload files frequently I would recommend you to create service for this based on skipper API.