1

Im trying to upload an image to my server using Node JS, Multer and Angular JS. The problem Im facing is no matter what I do, the "req.body" is always empty on server side. I need to send the image along with some information ( a password for instance ) but everything gets undefined when it reaches the server. The image is correctly getting uploaded nevertheless.

Can someone advise how to send BOTH some data and the image on the same call? Thanks in advance!

Edit : This is not a duplicate question

 $scope.uploadImage = function() {

      var fd = new FormData();

      var imgBlob = dataURItoBlob($scope.uploadme);
      fd.append('api_password', 'bombita');
      fd.append('file', imgBlob, $scope.theFile.name);


      $http.post(
          'http://45.33.116.147:4000/upload_aviso',
          fd, {

            transformRequest: angular.identity,
            headers: {
              'Content-Type': undefined
            }


          }
        )
        .success(function(response) {
          $scope.result_photo_upload = "Photo Successfully uploaded"
        })
        .error(function(response) {
          $scope.result_photo_upload = "Error uploading picture : " + JSON.stringify(response)
        });
    }

Edit 2 : Adding server side code.

 const PORT=4000;
    var express = require('express'); 
    var app = express(); 
    var bodyParser = require('body-parser');
    var multer = require('multer');
    var PASSWORD;
    const fileSys = require('fs');
    fileSys.readFile('/etc/api_password.txt', 'utf8', function(err, data) {  
     if (err) throw err;
        PASSWORD = data.trim();

    });

    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });
    /** Serving from the same express Server
    No cors required */
    app.use(express.static('../client'));
    app.use(bodyParser.json());
    var storage = multer.diskStorage({ //multers disk storage settings
        destination: function (req, file, cb) {
            cb(null, '/var/www/images/')
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
        console.log("File name : " + JSON.stringify(file));
            cb(null, "foto_avisos_" +  file.originalname)
        }
    });
    var upload = multer({ //multer settings
                    storage: storage
                }).single('file');
    /** API path that will upload the files */
    app.post('/upload_aviso', function(req, res) {
        console.log("API_password : " + JSON.stringify(req.body));
        upload(req,res,function(err){
            if(err){
            res.header('Access-Control-Allow-Origin', '*');
            res.header('Access-Control-Allow-Methods', '*');
            res.header('Access-Control-Allow-Headers', 'Content-Type'); 
                res.header('Content-Type', 'text/html'); 
                res.status(500).json({error_code:1,err_desc:err});
            return;
            }
             res.json({error_code:0,err_desc:null});
        });

    });

    app.options('*', function(req, res) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Methods', '*');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
        res.status(200).send("OK");
    }); 
    app.listen(PORT, function(){
        console.log('Application running on ' + PORT + '...');
    });
Matias Barrios
  • 4,674
  • 3
  • 22
  • 49

0 Answers0