0

I need to upload images into local folder using Angular.js, Node.js and Multer. I am using ngFileUpload to upload the file.

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{{$index+1}}:</span>
<div>

<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}"  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/{{mul.filename}}" 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.

3
  • 1
    Describe the problem. "I need some help" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code is producing it. Put a brief summary of the problem in the title of your question. Commented Mar 16, 2017 at 10:38
  • @georgeawg : My problem is how can i save the file using the original name. Commented Mar 16, 2017 at 11:05
  • The code uses deprecated methods. See Why are angular $http success/error methods deprecated? Removed from v1.6?. Commented Mar 16, 2017 at 16:37

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.