Node - Uploaded jpg cannot be opened on server

Question

UPDATE Thanks to @robertklep and @vallo for pointing out that I was not parsing the multipart request properly.

Here's the updated server code with some re-worked sample code from Busboy:

'use strict';

// Require
var http    = require('http');
var Busboy  = require('busboy');
var fs      = require('fs');

// Server
var server = http.createServer(function(request, response) {
  if (request.method === 'POST') {
    var busboy = new Busboy({ headers: request.headers });
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
      file.pipe(fs.createWriteStream(`../db/images/${filename}`));
    });
    busboy.on('finish', function() {
      response.writeHead(200, { 'Connection': 'close' });
      response.end("That's all folks!");
    });
    return request.pipe(busboy);
  }
  response.writeHead(404);
  response.end();
});
server.listen(8000, '192.168.7.25', () => {});

---

I am trying to post a jpg to an endpoint but the resulting image cannot be opened :

The file “image_copy.jpg” could not be opened. It may be damaged or use a file format that Preview doesn’t recognize.

Some background:

• Everything (servers, storage) are being hosted locally
• Have made a decision to only use native Node modules like http and fs due to storage constraints on a microcontroller board
• Am using form-data as it eases the pain of multi-part forms and uploads as well as sets the correct request headers

Here is some sample code broken into two scripts:

Server

'use strict';

// Require
var http = require('http');

// Server
var server = http.createServer((request, response) => {
    var body = [];
    request.on('data', function(chunk) {
      body.push(chunk);
    });
    request.on('end', function() {
        saveImage(Buffer.concat(body),null);
        response.statusCode = 200;
        response.end('thanks')
    });
});
server.listen(8000, '192.168.7.25', () => {});


// Process
function saveImage(data,callback) {
    var fs = require('fs');
  fs.writeFile('../db/images/image_copy.jpg', data, function(err) {});
}

Client

'use strict';

// Require
var FormData    = require('form-data');
var fs          = require('fs');
var http        = require('http');

// Vars
var form = new FormData();

// Process
form.append('my_file', fs.createReadStream('/temp/1.jpg'));
var request = http.request({
  hostname: '192.168.7.25',
  port: 8000,
  path: '/api/premises/v1/image',
  method: 'POST',
  headers: form.getHeaders()
});
form.pipe(request);
request.on('response', function(res) {
  console.log(res.statusCode);
});

After executing, the jpg is uploaded and saved to the correct file location (and also has the same file size as the source jpg) but the new image can't be opened.

Even if I encode the incoming chunk as binary and set the encoding on fs.writeFile to binary, I get a similar result.

What am I doing wrong? Thank you!

Answer 1

The client is uploading in multipart/form-data format, which is a format that can contain, amongst others, file data.

However, this means that the server should parse this format to extract the file data. Right now, the server is just taking the request body verbatim and writing it to a file.

The multiparty module can help you, and one of its usage examples shows you how to hook it up with http.Server: https://github.com/pillarjs/multiparty#usage

var multiparty = require('multiparty');
var http = require('http');
var util = require('util');

http.createServer(function(req, res) {
  // parse a file upload
  var form = new multiparty.Form();

  form.parse(req, function(err, fields, files) {
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received upload:\n\n');
    res.end(util.inspect({fields: fields, files: files}));
  });

}).listen(8000);

Using that, you can extract the file data from (I think) files.my_file and write it to the file.