CODEWITHSUNDEEP
javascriptformshttppost
user3700562
user3700562

Reputation: 827

Get HTTP Body of Form in JavaScript

Is it possible in Javascript to get the contents of the HTTP Body of the resulting HTTP request that would be sent when a Form is submitted?

Say I have a Form of type 'POST' with a file input and some other input fields and an enctype attribute of 'multipart/form-data'. I would like to get the verbatim HTTP Body and possibly HTTP Headers of the request the browser would generate if I submitted the form (without actually submitting it).

Upvotes: 3

Views: 3316

Answers (2)

guest271314
guest271314

Reputation: 1

You can use Response, Response.body.getReader() which is a ReadableStream to read the contents of FormData object. Use TextDecoder to convert Uint8Array to readable text. Note, you cannot read stream and headers from the same Response object. Though you can create a new Response object from same input data and the read Headers

var form = document.querySelector("form");
form.onsubmit = (e) => {
  e.preventDefault();
  var formData = new FormData();
  var input = e.target.querySelector("input");
  formData.append("file", input.files[0], input.files[0].name);

  var response = new Response(formData);
  var stream = response.body;
  var reader = stream.getReader();
  var decoder = new TextDecoder();
  reader.read()
    .then(function processData(result) {
      if (result.done) {
        console.log("stream done");
        return;
      }
      var data = decoder.decode(result.value);
      console.log(data);

      return reader.read().then(processData);
    })
    .catch(function(err) {
      console.log("catch stream cancellation:", err);
    });

  reader.closed.then(function() {
    console.log("stream closed");
  });
}
<form method="POST" enctype="multipart/form-data">
  <input name="file" type="file" />
  <input type="submit">
</form>

Upvotes: 3

Quentin
Quentin

Reputation: 943552

No. There are no APIs that expose that information.

You can attempt to manually construct the request, but there's no way to get the browser to prepare it for you.

Upvotes: 2

Related Questions