form-data - w3toppers.com

How to make POST requests with the FormData API

You can add something like this: myapp.controller(“myController”,function($scope,$http){ $scope.signup = function(){ var form_data = new FormData(); angular.forEach($scope.files,function(file){ form_data.append(‘file’,file); }); form_data.append(‘susername’,$scope.susername); // new line var config = {headers: { ‘Content-type’: undefined } }; $http.post(“picupload.php”,form_data, config) .success(function(response){ alert(response); }); } I’m not sure about PHP but after googling I found that in php ‘susername’ can retrieved as below: … Read more

fetch – Missing boundary in multipart/form-data POST

The solution to the problem is to explicitly set Content-Type to undefined so that your browser or whatever client you’re using can set it and add that boundary value in there for you. Disappointing but true.

FormData.append(“key”, “value”) is not working

New in Chrome 50+ and Firefox 39+ (resp. 44+): formdata.entries() (combine with Array.from() for debugability) formdata.get(key) and more very useful methods Original answer: What I usually do to ‘debug’ a FormData object, is just send it (anywhere!) and check the browser logs (eg. Chrome devtools’ Network tab). You don’t need a/the same Ajax framework. You … Read more

Send FormData and String Data Together Through JQuery AJAX?

var fd = new FormData(); var file_data = $(‘input[type=”file”]’)[0].files; // for multiple files for(var i = 0;i<file_data.length;i++){ fd.append(“file_”+i, file_data[i]); } var other_data = $(‘form’).serializeArray(); $.each(other_data,function(key,input){ fd.append(input.name,input.value); }); $.ajax({ url: ‘test.php’, data: fd, contentType: false, processData: false, type: ‘POST’, success: function(data){ console.log(data); } }); Added a for loop and changed .serialize() to .serializeArray() for object reference … Read more

appending array to FormData and send via AJAX

You can also send an array via FormData this way: var formData = new FormData; var arr = [‘this’, ‘is’, ‘an’, ‘array’]; for (var i = 0; i < arr.length; i++) { formData.append(‘arr[]’, arr[i]); } console.log(…formData); So you can write arr[] the same way as you do it with a simple HTML form. In case … Read more

Convert JS Object to form data

If you have an object, you can easily create a FormData object and append the names and values from that object to formData. You haven’t posted any code, so it’s a general example; var form_data = new FormData(); for ( var key in item ) { form_data.append(key, item[key]); } $.ajax({ url : ‘http://example.com/upload.php’, data : … Read more

Pass Data to Service in Axios

This question seems to come up often enough yet I cannot seem to find a canonical answer so here goes… When performing AJAX requests from a browser (via fetch or XMLHttpRequest), the runtime knows what to do for certain request body formats and will automatically set the appropriate Content-type header If the request body is … Read more

How to convert FormData (HTML5 object) to JSON

You could also use forEach on the FormData object directly: var object = {}; formData.forEach(function(value, key){ object[key] = value; }); var json = JSON.stringify(object); UPDATE: And for those who prefer the same solution with ES6 arrow functions: var object = {}; formData.forEach((value, key) => object[key] = value); var json = JSON.stringify(object); UPDATE 2: And for … Read more

How to inspect FormData?

Updated Method: As of March 2016, recent versions of Chrome and Firefox now support using FormData.entries() to inspect FormData. Source. // Create a test FormData object var formData = new FormData(); formData.append(‘key1’, ‘value1’); formData.append(‘key2’, ‘value2’); // Display the key/value pairs for (var pair of formData.entries()) { console.log(pair[0]+ ‘, ‘ + pair[1]); } Thanks to Ghost … Read more

How to set File objects and length property at FileList object where the files are also reflected at FormData object?

Edit: As proven by OP, in one of their gist, there is actually a way to do it… The DataTransfer constructor (currently only supported by Blink, and FF >= 62), should create a mutable FileList (chrome currently always return a new FileList, but it doesn’t really matter for us), accessible through the DataTransferItemList. If I’m … Read more