I need some help. I need to upload images into local folder using Angular.js ,Node.js and Multer. I am using ngFileUpload
to upload the file. I am explaining my code below.
category.html:
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<div ng-repeat="mul in mulImage">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Gallery Image:</span>
<div>
<input type="file" class="filestyle form-control" data-size="lg" name="upload_" id="bannerimage_" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">
</div>
<span class="input-group-btn" ng-show="mulImage.length>0">
<div><img ngf-src="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null"><img ng-src="upload/" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.filename!=''"><input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-" ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);"></div>
</span>
</div>
</div>
<input type="button" class="btn btn-success" ng-click="addGalleryImageDetails(billdata);" id="saveData" ng-value="buttonName" style="margin-right:20px;"/>
</form>
Here user can select multiple file and when will click on save
button the all files should upload into folder. My controller side code is given below.
$scope.addGalleryImageDetails=function(){
var imageString='';
var arrImage=[];
var imagearr=[];
if($scope.mulImage[0].image !=null){
for(var i=0;i<$scope.mulImage.length;i++){
if($scope.mulImage[i]['image']!=null){
var newmulpath='';
var today=(Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
newmulpath=today+"_"+ $scope.mulImage[i]['image'].name;
$scope.mulImage[i]['image']=Upload.rename($scope.mulImage[i]['image'], newmulpath);
arrImage.push({'image':$scope.mulImage[i]['image']});
}
}
}
if(arrImage.length>0){
$scope.upload=Upload.upload({
url: 'uploadAll',
method: 'POST',
file: arrImage
}).success(function(data, status, headers, config) {
}).error(function(data,status){
})
}
}
Here all multiple images are stored into arrImage
json object and it will send to server to upload into project folder.
My server side code is given below.
server.js:
var port=8989;
var express=require('express');
var morgan = require('morgan');
var http=require('http');
var bodyParser= require('body-parser');
var methodOverride = require('method-override');
var mongo = require('mongojs');
var session = require('express-session');
var multer = require('multer')
var upload = multer({ dest: 'uploads/' });
var app=module.exports=express();
var server=http.Server(app);
var admin=require('./route/route.js');
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.urlencoded({ extended: false })) // parse application/x-www-form-urlencoded
app.use(bodyParser.json()) // parse application/json
app.use(methodOverride()); // simulate DELETE and PUT
app.use(session({secret: 'FGDPlexel',resave: true,saveUninitialized: true}));
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
})
server.listen(port);
console.log("Server is running on the port"+port);
Here my requirement is all images will store into project folder with its original name . Here i am using multer
middleware to store the files. Please help me to resolve this problem.
via satya
No comments:
Post a Comment