i am trying to upload multiple files using multer. I am having three input boxes and one upload button to upload three files at a time.As per the client requirement user needs to select one file at a time and after selecting three files,user can upload all the files in one go.
HTML
<div ng-show="role == '1'" class="col-sm-4 col-md-4 form-group">
<label for="basic-url">Upload Your Image (Passport Size)</label>
<input type="file" class="form-control" file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(this.files)"></label>
<input type="submit" class="btn btn-primary" ng-click="Submit('customerimage')" value="Upload" >
</div>
<div ng-show="role == '1'" class="col-sm-4 col-md-4 form-group">
<label for="basic-url">Upload Pan Card image</label>
<input type="file" class="form-control" file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(this.files)"></label>
<input type="submit" class="btn btn-primary" ng-click="Submit('pancardimage')" value="Upload" >
</div>
<div ng-show="role == '1'" class="col-sm-4 col-md-4 form-group">
<label for="basic-url">Upload Bank Passbook image</label>
<input type="file" class="form-control" file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(thi`enter code here`s.files)"></label>
<input type="submit" class="btn btn-primary" ng-click="Submit('bankimage')" value="Upload" >
</div>
</div>
Server.js
var multer=require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/uploads/images/');
},
filename: function (req, file, cb) {
if(! file.originalname.match(/\.(jpeg|jpg|png|JPEG|JPG|PNG)$/)){
var err=new Error();
err.code="filetype";
return cb(err);
}else{
cb(null,Date.now() + '_' + file.originalname);
}
//cb(null, file.fieldname + '-' + Date.now());
}
});
var upload = multer({ storage: storage }).single('myFile');
app.post('/upload', function (req, res) {
upload(req, res, function (err) {
console.log(req.file);
if (err) {
if(err.code=='LIMIT_FILE_SIZE'){
res.json({success:false,message:'file is tool arge'});
}else if(err.code=='filetype'){
res.json({success:false,message:'file type is invalid'});
}else{
res.json({success:false,message:'file is not selected'});
}
}
else{
if(!req.file){
res.json({success:false,message:'no file selected'});
}
else{
console.log(req.file);
res.json({success:true,message: req.file});
}
}
// Everything went fine
});
});
Controller
$scope.file={};
$scope.Submit=function(name){
$scope.name = name;
uploadFile.upload($scope.file).then(function(data){
if(data.data.success){
$scope.alert='alert alert-success';
$scope.message=data.data.message;
$scope.file={};
$scope.newCustomer[$scope.name] = 'uploads/images/' + data.data.message.filename;
}else{
$scope.alert='alert alert-danger';
$scope.message=data.data.message;
$scope.file={};
}
});
};
$scope.photoChanged=function(files){
if(files.length >0 && files[0].name.match(/\.(jpeg|jpg|png)$/)){
var file=files[0];
var fileReader=new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload=function(e){
$timeout(function(){
$scope.thumbnail={};
$scope.thumbnail.dataUrl=e.target.result;
});
}
}
else{
$scope.thumbnail={};
$scope.message=false;
}
};
Directive
app.directive("fileModel",['$parse',function($parse){
return{
restrict:"A",
link:function(scope,element,attrs){
var parsedFile=$parse(attrs.fileModel);
var parsedFileSetter=parsedFile.assign;
element.bind('change',function(){
scope.$apply(function(){
parsedFileSetter(scope,element[0].files[0]);
});
});
}
};
}]);
Service
//var app = angular.module('MLMApp',[]);
app.service("uploadFile",function($http){
this.upload=function(file){
var fd=new FormData();
fd.append('myFile',file.upload);
return $http.post('/upload',fd,{
transformRequest:angular.identity,
headers:{'Content-Type':undefined}
//headers:{'Content-Type':'multipart/form-data}
});
};
});
via Gurunath Bhopale
No comments:
Post a Comment