Nodejs POST request multipart/form-data

forms api node.js http post

86,155

Solution 1

After some more research, I decided to use the restler module. It makes the multipart upload really easy.

fs.stat("image.jpg", function(err, stats) {
    restler.post("http://posttestserver.com/post.php", {
        multipart: true,
        data: {
            "folder_id": "0",
            "filename": restler.file("image.jpg", null, stats.size, null, "image/jpg")
        }
    }).on("complete", function(data) {
        console.log(data);
    });
});

Solution 2

So I just got done wrestling with this myself and here is what I learned:

It turns out that neither request or form-data are setting the content-length header for the generated body stream.

Here is the reported issue: https://github.com/mikeal/request/issues/316

The solution posted by @lildemon gets around this by:

Generating the FormData object
Getting it's length
Making the request and setting the form object and content-length header explicitly

Here is a modified version of your example:

var request = require('request');
var FormData = require('form-data');

var form = new FormData();
form.append("folder_id", "0");
form.append("filename", fs.createReadStream(path.join(__dirname, "image.png")));

form.getLength(function(err, length){
  if (err) {
    return requestCallback(err);
  }

  var r = request.post("http://posttestserver.com/post.php", requestCallback);
  r._form = form;     
  r.setHeader('content-length', length);

});

function requestCallback(err, res, body) {
  console.log(body);
}

Solution 3

I have working code that does exactly what your question states, with one exception. My file content is appended this way:

form.append('file', new Buffer(...),
    {contentType: 'image/jpeg', filename: 'x.jpg'});

To discover the final options argument I had to drill down into the source of form-data. But this gives me a working configuration. (Maybe it was what you were missing, but of course that will depend on the server.)

Solution 4

I tried also request and form-data modules and was unable to upload a file. You can use superagent which works:

http://visionmedia.github.io/superagent/#multipart-requests.

var request = require('superagent');
var agent1 = request.agent();
agent1.post('url/fileUpload')
      .attach('file',__dirname + "/test.png")
      .end(function(err, res) {
          if (err) {
              console.log(err)
           }
       });

View more solutions

86,155

Author by

giodamelio

I am a 18 year old with many interests including computer programming, web developing, robotics and AI(artificial intelligent) and quantum computing. I program in vb.net, python, php, javascript and HTML. My favorite quote. "Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to build bigger and better idiots. So far, the universe is winning." - Rick Cook

Updated on July 24, 2020

Comments

giodamelio almost 4 years

I am trying to upload a photo via a POST request with the request module

According to the readme I should just be able to do this

var r = request.post("http://posttestserver.com/post.php", requestCallback)
var form = r.form()
form.append("folder_id", "0");
form.append("filename", fs.createReadStream(path.join(__dirname, "image.png")));

function requestCallback(err, res, body) {
    console.log(body);
}

The problem is, this doesn't work. I get a reply from the test server saying it dumped 0 post variables.

I have confirmed that the server is in working condition with this little html page

<html>
    <body>
        <form action="http://posttestserver.com/post.php?dir=example" method="post" enctype="multipart/form-data">
            File: <input type="file" name="submitted">
            <input type="hidden" name="someParam" value="someValue"/>
            <input type="submit" value="send">
        </form>
    </body>
</html>

So the question is, what am I doing wrong with the request module? Is there a better way to send multipart/form-data with node?

webjockey over 11 years

Make sure the following statement at import section var fs = require('fs');
Adam Mendoza over 9 years

Getting the file size: var fs = require('fs'); var fileStats = fs.statSync('/myFile.jpg'); var fileSizeInBytes = fileStats["size"]; console.log(fileStats); console.log(fileSizeInBytes);
M4ver1k over 8 years

does this answer the question ?
Jothi Sankar N Kanakavel over 7 years

This is really helped me. After long hours of search i just got this. Thanks.
Admin about 7 years

I am getting error if file size is more than 2 mb. what should I modify in code ?
Alexander Swann over 6 years

When posting this to another service's url, the readStream property disappears from the payload and no events on the request are detected on the receiving end. Any ideas why?
Nate Bunney about 6 years

Many PHP servers have an upload limit of 2mb. Can you upload a larger file directly using the form? If not then it is a server limitation that your code can not overcome.
nagylzs about 6 years

superagent is much easier to use than FormData, restler or axios. The @type/superagent is out of date though. (3.1 instead of 3.4)
sp3c1 almost 3 years

I was going to embark on this journey but you just saved me the trouble. ty! 7 years later it is still not well documented