[SOLVED] Node.js Busboy not firing "file" event before "finish" event

Node.js Busboy not firing "file" event before "finish" event

I am just trying to upload a file from the browser through Node.js/Next.js to S3, and busboy is not emitting the file event.

Here is my FE code essentially:

Upload.prototype.to = function(options, fn){
  // TODO: x-browser
  var path;
  if (typeof options == 'string') {
    path = options;
    options = {};
  } else {
    path = options.path;
  }
  var self = this;
  fn = fn || function(){};
  var req = this.req = new XMLHttpRequest;
  req.open('POST', path);
  req.onload = this.onload.bind(this);
  req.onerror = this.onerror.bind(this);
  req.upload.onprogress = this.onprogress.bind(this);
  req.onreadystatechange = function(){
    if (4 == req.readyState) {
      var type = req.status / 100 | 0;
      if (2 == type) return fn(null, req);
      var err = new Error(req.statusText + ': ' + req.response);
      err.status = req.status;
      fn(err);
    }
  };
  var key, headers = options.headers || {};
  for (key in headers) {
    req.setRequestHeader(key, headers[key]);
  }
  var body = new FormData;
  body.append(options.name || 'file', this.file);
  var data = options.data || {};
  for (key in data) {
    body.append(key, data[key]);
  }
  req.send(body);
};

All that's doing is making the request to /api/<path> with the file name for the selected jpeg I am trying to upload. This is what I receive in the server request body:

body: '------WebKitFormBoundaryWbaXO8J6c8aI7Q4B\r\n' +
    'Content-Disposition: form-data; name="file"; filename="1-profile.jpg"\r\n' +
    'Content-Type: image/jpeg\r\n' +
    '\r\n' +
    '����\x00\x10JFIF...

The headers include these:

  connection: 'keep-alive',
  'content-length': '41079',
  pragma: 'no-cache',
  'cache-control': 'no-cache',
  'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryWbaXO87Kc9aI2Q4B',
  accept: '*/*',
  origin: 'http://localhost:3000',

My server code looks like this:

import fetchId from '../../../../utils/get-next-id-from-pg'
import Busboy from 'busboy'
import s3 from 'initializers/s3'

export default async function(req, res) {
  if (req.method === 'POST') {
    const id = await fetchId('image')

    return new Promise((resolve, rej) => {
      const busboy = new Busboy({ headers: req.headers });
      busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) {
        console.log('Field [' + fieldname + ']: value: ' + inspect(val));
      })
      busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
        console.log('params')
        const params = {
          Bucket: 'mybucket123',
          Key: id,
          Body: file
        }
        s3.upload(params, (err, data) => {
          console.log('s3', err, data)
          res.setHeader('Connection', 'close');
          res.status(200).json({ records: [ { id } ]})
          resolve()
        })
      })
      busboy.on('finish', function() {
        console.log('finish')
      })
      req.pipe(busboy);
    })
  } else {
    res.writeHead(405, { 'content-type': 'text/plain' });
    res.end("Method not allowed. Send a POST request.");
    return;
  }
}

It logs finish and that's it, it doesn't log either file or field. What am I missing here? It doesn't log params inside of the on('file') handler, or any of the s3 stuff. I am starting to dig into the busboy source code but is there any better way? What am I doing wrong, or what is a library that works with Next.js?

I am using Next.js and dotenv, could that be causing weird issues?

Solution