`source.on is not a function` from form-data when attaching a file

It looks like I’m hitting https://github.com/request/request/issues/1495 when trying to use superagent for an asynchronous file uploader.

export default class ApiClient {                 
  static asyncUpload(file, siteCompanyId) {      
    return new Promise((resolve, reject) => {    
      superagent                                 
      .post('/client_api/upload_file')           
      .field('file', file)                       
      .end( (err, res) => {                      
        if (err || !res.status == 'ok') {        
          reject(res);                           
        } else {                                 
          resolve(res.body);                     
        }                                        
      });                           
  }                                              
}

This seems to work just fine in my browser, but when I try to run my tests I get

1) ApiClient asyncUpload should send file data to the server:
   TypeError: source.on is not a function
    at Function.DelayedStream.create (node_modules/delayed-stream/lib/delayed_stream.js:33:10)
    at FormData.CombinedStream.append (node_modules/combined-stream/lib/combined_stream.js:43:37)
    at FormData.append (node_modules/form-data/lib/form_data.js:68:3)
    at Request.exports.field (node_modules/superagent/lib/request-base.js:209:23)
    at frontend/applicant/js/api_client.js:11:10
    at Function.asyncUpload (frontend/applicant/js/api_client.js:9:10)
    at Context.<anonymous> (frontend/applicant/js/test/api_client.spec.js:33:4)

The test looks like

describe('asyncUpload', function() {
  it('should send file data to the server', () => {
    // prepare test articles
    let file = {
      "name": "blah.txt",
      "size": 6,
      "type": "text/plain",
    };

    // prepare http interceptor
    nock('http://localhost/')
      .post('/client_api/upload_file', {
        file: file,
      })
      .reply(200, {
        status: 'ok',
        payload: {
          appfileId: 43,
        },
      });

    return ApiClient.asyncUpload(file, siteCompanyId).then( (data) => {
      console.log('test then');
    });
});

From yarn.lock:

superagent:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/superagent/-/superagent-2.3.0.tgz#703529a0714e57e123959ddefbce193b2e50d115"
  dependencies:
    component-emitter "^1.2.0"
    cookiejar "^2.0.6"
    debug "^2.2.0"
    extend "^3.0.0"
    form-data "1.0.0-rc4"
    formidable "^1.0.17"
    methods "^1.1.1"
    mime "^1.3.4"
    qs "^6.1.0"
    readable-stream "^2.0.5"

and

∙ node -v  
-64

[vinnymac]

I ran into this issue on v3.8.3 of an old project I maintain. If your test has control of the file being passed to attach. You can easily workaround this problem by doing the following.

import request from 'superagent'

function testUpload(url, mockFile, errorHandler) {
  const r = request.post(url)
      .field({ name: 'cat.gif' })
      .attach('file', mockFile, mockFile.name)
      .on('error', errorHandler)

  Object.assign(mockFile, {
    on: () => {},
    pause: () => {},
    resume: () => {},
  })

  return r
}

It seems the file ends up being considered the stream in delayed_stream.js and combined_stream.js, so forcing those methods to be defined gets around it. You can go further and use mock implementations if you needed to.

Just wanted to share for others who may be stuck on an older version or are still experiencing this problem.

[EduardoFLima]

Just bumped into the same issue on version 5.2.2. @vinnymac solution helped but didn’t solve the problem because I’m using nock for mocking the request result and now it is timing out - probably because of these mocks (on/pause/resume).

What solved to me was, instead of attaching the file, sending a FormData:

let formData = new FormData();
formData.append('file', file);

request.post(uri)
       .send(formData);