3

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).

user3700562
  • 693
  • 11
  • 23
  • 1
    It's logically impossible to do something without doing it. You can do something by [doing it](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax). – Daniel W. Oct 18 '16 at 15:19

2 Answers2

3

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>
guest271314
  • 1
  • 15
  • 104
  • 177
  • 1
    @user3700562 See also [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) , plnkr http://plnkr.co/edit/pLvfJ93R7g5RaezBhz6h?p=preview – guest271314 Oct 18 '16 at 16:31
  • Note, substitute `response.text()` for `stream.getReader()` at Firefox, which does not support `ReadableStream` – guest271314 Nov 09 '17 at 15:17
2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • It is possible to retrieve `.har` representation of `Request` at `DevTools`. It is also possible to get the `FormData` data – guest271314 Oct 18 '16 at 15:20
  • @guest271314 it's not possible to submit a form without submitting it. – Daniel W. Oct 18 '16 at 15:22
  • @DanFromGermany Yes it is. You can create a `Response` object and read the `Response.body`. See this deleted [Answer](http://stackoverflow.com/a/38295759/) at [How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?](http://stackoverflow.com/questions/38195855/how-to-create-an-arraybuffer-and-data-uri-from-blob-and-file-objects-without-fil) – guest271314 Oct 18 '16 at 15:23
  • 1
    @guest271314 — The har representation is (a) only available after the submission and (b) isn't available to JavaScript in the assumed context of "running in a webpage". The deleted answer you mention doesn't deal with the creation of a *Request*. – Quentin Oct 18 '16 at 15:51
  • @Quentin Believe OP is attempting to read what is being `POST`ed from `
    `
     – guest271314 Oct 18 '16 at 15:55