Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)

by

According to the documentation of FormData, you can append a field with a specific content type by using the Blob constructor:

var formData = new FormData();

formData.append('items', new Blob([JSON.stringify({
    name: "Book",
    quantity: "12"
})], {
    type: "application/json"
}));

After careful observation, it turns out that it will send the part as follows:

Content-Disposition: form-data; name="items"; filename="blob"
Content-Type: text/json

The only alternative, safe from building the whole request yourself is to pass a string value:

formData.append('items', '{"name": "Book", "quantity": "12"}');

This, unfortunately, doesn’t set the Content-Type header.

More Related Contents:

  1. Angularjs how to upload multipart form data and a file?
  2. AngularJS does not send hidden field value
  3. Asynchronous file upload (AJAX file upload) using jsp and javascript [duplicate]
  4. Required attribute Not working with File input in Angular Js
  5. Angular form validation ng-disabled not working
  6. Angularjs – simple form submit
  7. copying the value of a form’s file input field to another form’s input field
  8. FormData how to get or set boundary in multipart/form-data – Angular
  9. Why does setting ng-model to undefined not make the form/input valid again?
  10. jQuery AJAX submit form
  11. Send POST data using XMLHttpRequest
  12. Delaying AngularJS route change until model loaded to prevent flicker
  13. What is the difference between angular-route and angular-ui-router?
  14. How do I capture response of form.submit
  15. How to remove one specific selected file from input file control
  16. Migrating AngularJS to Angular 4,5 (with DEMO) [closed]
  17. How to add many functions in ONE ng-click?
  18. How to reload or re-render the entire page using AngularJS
  19. How to get number of rows in using JavaScript?
  20. Angularjs “Controller as” or “$scope”
  21. How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
  22. AngularJS – Image “onload” event
  23. Download text/csv content as files from server in Angular
  24. JavaScript: Remove duplicates of objects sharing same property value
  25. Can an angular directive pass arguments to functions in expressions specified in the directive’s attributes?
  26. CORS error for application running from file:// scheme
  27. The view is not updated in AngularJS
  28. Using Express Handlebars and Angular JS
  29. Submit form on Enter key with javascript
  30. Passing parameter inside $location.path in Angular

Leave a Comment