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.

halfer
  • 19,824
  • 17
  • 99
  • 186
satya
  • 3,508
  • 11
  • 50
  • 130
  • 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. – georgeawg Mar 16 '17 at 10:38
  • @georgeawg : My problem is how can i save the file using the original name. – satya Mar 16 '17 at 11:05
  • The code uses deprecated methods. See [Why are angular $http success/error methods deprecated? Removed from v1.6?](http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/). – georgeawg Mar 16 '17 at 16:37

0 Answers0