Get HTTP Body of Form in JavaScript

by

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>

More Related Contents:

  1. JavaScript post request like a form submit
  2. Send POST data using XMLHttpRequest
  3. How to submit a form using PhantomJS
  4. fetch() does not send headers?
  5. Angularjs how to upload multipart form data and a file?
  6. Posting parameters to a url using the POST method without using a form
  7. Sending an HTTP Post using Javascript triggered event
  8. A form’s “action” and “onsubmit”: Which executes first?
  9. Best way to track onchange as-you-type in input type=”text”?
  10. Access Control Request Headers, is added to header in AJAX request with jQuery
  11. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  12. How to reset a form using jQuery with .reset() method
  13. Setting query string using Fetch GET request
  14. get client time zone from browser [duplicate]
  15. Drop-down box dependent on the option selected in another drop-down box
  16. Nodejs POST request multipart/form-data
  17. http basic authentication “log out”
  18. Change the content of a div based on selection from dropdown menu
  19. HTML form with two submit buttons and two “target” attributes
  20. Javascript to Select Multiple options [closed]
  21. Regex for Umlaut
  22. HTTP request from Angular sent as OPTIONS instead of POST
  23. Required attribute Not working with File input in Angular Js
  24. Getting an option text/value with JavaScript
  25. How to use JavaScript to change the form action [duplicate]
  26. Javascript – Stop form submit depending on ajax response [duplicate]
  27. Check if input is number or letter javascript
  28. Copy/Paste from Excel to a web page
  29. .js.erb VS .js
  30. jquery serialize and multi select dropdown

Leave a Comment