Thursday, 16 March 2017

How to save images into project folder using Angular.js,Node.js and Multer

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