Formidable/NodeJS HTTP Server JPG save

Question

Stackoverflow JS Genius's!

I have an issue with my current project, it's using node's HTTP createServer, using Formidable to parse the body data.

See code below. (http-listener.js)

var listenport = 7200;

const server = http.createServer((req, res) => {

  // Set vars ready
  var data = '';
  var plateImg = '';
  var overview1 = '';
  var overview2 = '';

  new formidable.IncomingForm().parse(req)
  // I originally thought it was sent in files, but it isnt, it's fields.
  .on('file', function(name, file) {
    console.log('Got file:', name);
  })
  // This is the correct procedure for my issue.
  .on('field', function(name, field) {
    console.log('Got a field:', name);
    if(name.toLowerCase() === "anpr.xml")
    {
      // DO PARSE INTO JSON! This works, all is well.
      xml2js.parseString(field, {explicitArray:false, ignoreAttrs:true}, function (err, result)
      {
        if(err)
        {
          alert('Parse: '+err);
        }
        // Console log parsed json data.
        console.log("Read: "+result.EventNotificationAlert.ANPR.licensePlate);
        console.log(result);
        data = result;
      });
    }
    if(name.toLowerCase() === "licenseplatepicture.jpg")
    {
      plateImg = field
      // This doesnt work?
      // I need to store these fields as an image. ? Is this possible with it being sent as a field and not as a file upload.
      // This is the only option I have as I can't control the client sending this data (It's a camera)
      fs.writeFile(config.App.ImageDir+'/Plate.jpg', plateImg, function(err) {
        if(err)console.log(err);
      });
    }
    if(name.toLowerCase() === "detectionpicture.jpg")
    {
      if(overview1 == '')
      {
        overview1 = field;
      }
      else if(overview2 == '')
      {
        overview2 = field;
      }
      else
      {
        // do nothing else.
        console.log("Couldn't send images to variable.");
      }
    }
  })
  .on('error', function(err) {
    alert(err);
  })
  .on('end', function() {
    // Once finished, send to ANPR data to function to handle data and insert to database. WORKS
    // Call anpr function.
    ANPR_ListenData(data, plateImg, overview1, overview2, function(result) {
      if(result.Status > 0)
      {
        console.log("Accepted by: "+result.Example);
        // reset var
        data = '';
        plateImg = '';
        overview1 = '';
        overview2 = '';
        res.writeHead(200, {'content-type':'text/html'});
        res.end();
      }
    });
  });
});

server.listen(listenport, () => {
  console.log('ANPR Server listening on port: ' + listenport);
});

Basically the images that are sent in the fields: licenseplatepicture.jpg etc I want to store them directly into my app image directory.

Unfortunately I have no control over how the chunks are sent to this server due to it being a network camera, I simply need to write a procedure.

The full request chunk is quite large so I will upload the file to OneDrive for you to glance at and understand the request.

Any help with this will be appreciated. I've tried everything I can possibly think of, but the file saves unreadable:(. I don't know where else to look or what else I can try, other than what I've already done & tried.

Request Txt File: https://1drv.ms/t/s?AqAIyFoqrBTO6hTwCimcHDHODqEi?e=pxJY00

Ryan.

Answer 1

I fixed this by using Busboy package instead of Formidable.

This is how my http listener looks like using Busboy.

var inspect = util.inspect;

var Busboy = require('busboy');

http.createServer(function(req, res) {
  if (req.method === 'POST') {
    //vars
    var ref = Math.random().toString(36).substring(5) + Math.random().toString(36).substring(2, 15);;
    var xml = '';
    var parseXml = '';
    var over1, over2 = '';
    var i = 0;

    var busboy = new Busboy({ headers: req.headers });
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
      console.log('File [' + fieldname + ']: filename: ' + filename + ', encoding: ' + encoding + ', mimetype: ' + mimetype);
      if(filename.toLowerCase() === "licenseplatepicture.jpg")
      {
        var saveTo = config.App.ImageDir+"/"+ref+"_Plate.jpg";
        if (!fs.existsSync(saveTo)) {
          //file exists
          file.pipe(fs.createWriteStream(saveTo));
        }
      }
      if(filename.toLowerCase() === "detectionpicture.jpg")
      {
        i++;
        var saveTo = config.App.ImageDir+"/"+ref+"_Front_"+i+".jpg";
        if (!fs.existsSync(saveTo)) {
          //file exists
          file.pipe(fs.createWriteStream(saveTo));
        }
      }
      file.on('data', function(data) {
        if(filename.toLowerCase() === "anpr.xml")
        {
          xml += data;
        }
        console.log('File [' + fieldname + '] got ' + data.length + ' bytes');
      });
      file.on('end', function() {
        console.log('File [' + fieldname + '] Finished');
      });
    });
    busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) {
      console.log('Field [' + fieldname + ']: value: ' + inspect(val));
      // No fields according to busboy
    });
    busboy.on('finish', function() {
      // DO PARSE INTO JSON! This works, all is well.
      xml2js.parseString(xml, {explicitArray:false, ignoreAttrs:true}, function (err, result)
      {
        if(err)
        {
          alert('Parse: '+err);
        }
        // Set parsed var
        parseXml = result;
      });
      var images = '';
      if(i = 2)
      {
        images = `{"Plate":"${ref}_Plate.jpg", "Front":"${ref}_Front_1.jpg", "Overview":"${ref}_Front_2.jpg"}`;
      } else {
        images = `{"Plate":"${ref}_Plate.jpg", "Front":"${ref}_Front_1.jpg", "Overview":"null"}`;
      }
      // Once parsed, send on to ANPR listen function.
      ANPR_ListenData(ref, parseXml, images, function(result) {
        if(result.Status == 1)
        {
          console.log('Data transfered for: '+parseXml.EventNotificationAlert.ANPR.licensePlate);
          console.log('Accepted Camera: '+result.Example);
          res.writeHead(200, { Connection: 'close', Location: '/' });
          res.end();
        }
      });
    });
    req.pipe(busboy);
  }
}).listen(7200, function() {
  console.log('Listening for requests');
});

Hope this helps someone else in the future. Certainly caused me a lot of a wasted time.

Busboy was the better package to use when I was reading into it more, it makes more sense for what I was attempting to achieve.

Ryan:). All the best.