request: Chrome: formData can't be used because browsers can't use `on`.

I’m not sure if browser support is a goal of this lirbary, but when using this library via Browserify, you cannot make multipart/form requests.

Sample Request

request.put("/v3/uploads", {json:false, formData: {upload: file_handle}})

Error: Uncaught TypeError: self._form.on is not a function request.js:1134.

It looks like browsers don’t support the .on('error') call.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 7
  • Comments: 21 (1 by maintainers)

Most upvoted comments

I used multipart option and I set headers option with 'content-type': 'multipart/form-data':

 request(
  {
    method: 'POST',
    uri: urlToCall,
    headers: {
      'content-type': 'multipart/form-data',
    },
    multipart: {
         chunked: false,
         data:[
          {
            'Content-Disposition': 'form-data; name="nameParam1"',
            body :  inputToSend.username
          },
          {
            'Content-Disposition': 'form-data; name="nameParam2"',
            'Content-Type': 'application/json',
            body: JSON.stringify(objJson)
          }
          ]
      },
  },

  function (error, response, body) {
    if (error) {
      console.log("error:" + error);
      }
    console.log("success:" + body);
  }

);

@dafergu2, I had the same issue in electron app. But my solution was to get the request module from window scope.

let nodeRequest;
if (window.require) {
  // rendered
  nodeRequest = window.require('request');
} else {
  // main process
  nodeRequest = require('request');
}

....

nodeRequest(requestOptions, (error, response, body) => {
   ...
}

I used this:

var form = new FormData();
form.append('filename',  name);
form.append('file', new Blob([filecontents]));
var request = new XMLHttpRequest();
request.open("POST", "http://" + serverURL + '/upload');
request.send(form);
request.onload = function()
{
    callback(request.status, request.responseText);
};

thanks @AlessandroPilastrini for your workaround. That works well. For reference, if you want to upload binary data (e.g. images), use this:

If you have an HTML5 upload, you can use a FileReader for the File. Example:

const fileReader = new window.FileReader();
fileReader.onload = function(e) {
  const filename = "somefilename.png";

  request({
    method: 'POST',
    uri: uriToCall,
    headers: { 'Content-Type': 'multipart/form-data'},
    multipart: {
      chunked: false,
      data: [
        {
          'Content-Disposition': `form-data; name="filedata"; filename="${filename}"`,
          body: e.target.result
        }
      ]
    };
  })
};

fileReader.readAsArrayBuffer(binaryData);

Had the same problem, couldn’t find a solution.

Ended up using superagent. Just sent an object with content-type application/x-www-form-urlencoded

I played around with many variations of request’s multipart configurations and could not get it to work with file data.

I quickly tried looking into the issue and it appears that there is quite a bit of the the _form member in the request object missing. I tried to fake the on event and then moved on to faking a few other missing pieces. I gave up though as it appears there is a lot missing. I’m not sure if the issue is at the request, form-data or browserify layer. I’m a little concerned that that this type of thing isn’t under any code coverage.

For now, I’ve gone ahead and decided to use needle as it just works 😉

@AlessandroPilastrini thanks, this worked as a nice workaround.

//changes made to line 1134. Please check out . requestjs.txt

//For further explaination , refer

http://stackoverflow.com/questions/32797573/alternative-to-onerror-this-onerror-bindthis-in-es6