I am having trouble posting form data using URLSearchParams in EdgeHTML 17 only. Does anyone know of any issues with the latest update?
I am using the following NPM packages as polyfills for older browsers:
whatwg-fetch: "2.0.4"
promise-polyfill: "8.0.0"
url-search-params-polyfill: "4.0.0"
Here is the code that I am using:
fetch("/api/checkout", { method: 'POST', headers: new Headers({
"X-Requested-With": "FetchAPI",
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
}), credentials: 'include', body: new URLSearchParams($("#MyForm").serialize()) })
.then((msg) => {
return msg.json();
}).then((data) => {
console.log(data);
});
It seems that edge doesn't automatically does a toString anymore on the body. By adding .toString() to the body it should work.
Related
let formData = new FormData();
formData.append("name",name);
formData.append("description",description);
formData.append("image", image);
fetch("https://api.nft.storage/store",{
method: "POST",
body: formData,
headers: {
'Authorization': 'Bearer '+process.env.TEST_API_KEY,
}
}).then(response => response.json())
.then((json)=>{
console.log(json)
})
This is what I've been trying to do but keep getting error as a response. Errors are usually invalid-file or something to do with content-type.
https://nft.storage/api-docs/ - This is the api documentation. If theres any example for the same, it'll be really helpful. Thanks!
Long time since question... just for any one wondering:
The api endpoint receives 1 parameter called meta which is a json_encoded representation of the fields, any falsy value like image: undefined, will be replaced with an extra field you must include, with the binary representation of the field... here is an example:
let params = {
name: 'name of the nft',
image: undefined,
description: 'description of the nft'
}
let formData = new FormData();
formData.append("meta",JSON.stringify(params));
formData.append("image",new File([ someBinaryImageData ], 'nft.png', { type: 'image/png' });
fetch("https://api.nft.storage/store",{
method: "POST",
body: formData,
headers: {
'Authorization': 'Bearer '+process.env.TEST_API_KEY,
}
})
.then(response => response.json())
.then((json)=>{
console.log(json);
})
I'm running TestCafe for UI automation, using ClientFunctions to trigger API requests (so that I can pass along session cookies).
Currently I have a ClientFunction with fetch which works fine... except we're now testing IE 11 and Fetch is unsupported.
Fetch code:
const fetchRequestClientFunction = ClientFunction((details, endpoint, auth, method) => {
return window
.fetch(endpoint, {
method,
credentials: 'include',
headers: new Headers({
accept: 'application/json',
'Content-Type': 'application/json',
}),
body: JSON.stringify(details),
})
.then(httpResponse => {
if (httpResponse.ok) {
return httpResponse.json();
}
return {
err: true,
errorMessage: `There was an error trying to send the data ${JSON.stringify(
details
)} to the API endpoint ${endpoint}. Status: ${httpResponse.status}; Status text: ${httpResponse.statusText}`,
};
});
});
However when I try to switch it to axios... not so much:
import axios from 'axios';
const axiosRequest = ClientFunction((details, endpoint, auth, method) => {
return axios({
method,
auth,
url: endpoint,
data: details,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
timeout: 3000,
})
.then(httpResponse => {
if (httpResponse.status < 300) return httpResponse;
return {
err: true,
errorMessage: `There was an error trying to send the data ${JSON.stringify(
details
)} to the API endpoint ${endpoint}. Status: ${httpResponse.status}; Status text: ${httpResponse.statusText}`,
};
});
});
Tried using window.axios, and also passing axios as a dependency. I've also tried making the axios request without the ClientFunction... and despite getting response of 200, the website wasn't updated as expected.
Each time I either get _axios2 is not defined or window.axios is not a function. I would greatly appreciate some guidance here.
TestCafe ClientFunctions allow only serializable objects as dependencies. You need to have axios on the client side to send such a request.
I have a route in Rails API '/api/pay'. My client side post request successfully hits the controller action, however nothing I send in the body: JSON.stringify('...') gets through to the back-end. Other post requests I have made work just fine with the same format.
export const payForItem = (payData) => {
return dispatch => {
dispatch(payForItemStart());
// ?userID=${data.userID}&adID=${data.adID}&price=${data.price}
const data = {userID: payData.userID, adID: payData.adID, price: payData.price}
fetch(`/api/pay`, {
method: 'POST',
header: {
'content-type': 'application/json'
},
body: JSON.stringify(data)
})
Here is what payData looks like.
Rails Api back-end params
Probably you've got typo in headers section. Should be plural headerS with s:
headers: {
"Content-Type": "application/json"
}
I've tried with these Meteor HTTP.get methods in the server side:
HTTP.get(`http://graph.facebook.com/${fbUserId}/picture?callback=?`, {
headers: {
'content-type': 'application/json',
}
}, function(data){
console.log(data); // [Error: failed [400]]
});
HTTP.get(`https://graph.facebook.com/${fbUserId}/picture`, {
headers: {
'content-type': 'application/json',
}
}, function(data){
console.log(data); // null
});
However, this works in the client side with jQuery:
$.getJSON(`http://graph.facebook.com/${fbUserId}/picture?callback=?`, function(data){
console.log(data); // {url: 'http://img-url...'}
});
Any ideas?
UPDATE
#Ethaan answer worked (with a few additions):
function _fetchUserFacebookThumbnail(fbId){
return new Promise(function(resolve, reject){
HTTP.get(`https://graph.facebook.com/${fbId}/picture/?redirect=0&type=square`, function(error, data){
resolve(data['data']);
});
});
}
According to FB Developers docs, the ?redirect=0 query requests a JSON object instead of the image itself.
You are getting null on the second one because there is not error, so that means the second example work, try with error, data instead of just error.
Also if you only want to get the picuture you can just link to this.
facebookPicture = "https://graph.facebook.com/" + userFacebookId + "/picture/?type=large";
btw, mexican developer over here head ups =p.
I'm trying to create a webhook through the Trello API by using Meteor's HTTP.post method like this:
HTTP.post('https://api.trello.com/1/webhooks?key=...&token=...', {
params: {
idModel: '...',
callbackURL: '...'
},
}, function(error, result) {...});
The request works but the response i get is "Invalid value for idModel". However, if i try the same request using jQuery:
$.ajax({
type: 'POST',
url: https://api.trello.com/1/webhooks?key=...&token=...,
data: {
idModel: '...',
callbackURL: '...'
},
});
Everything works fine (i.e. the webhook is created and data is returned). Somehow Meteor's method seems to make it impossible for Trello to parse the idModel field. Any ideas what might be behind this? Am i doing something wrong or is there a bug?
I solved it by setting the Content-Type header to application/x-www-form-urlencoded. It was sent as text/plain before.
HTTP.post('https://api.trello.com/1/webhooks?key=...&token=...', {
params: {
idModel: '...',
callbackURL: '...'
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}, function(error, result) {...});
Try using data instead of params:
HTTP.post('https://api.trello.com/1/webhooks?key=...&token=...', {
data: {
idModel: '...',
callbackURL: '...'
},
}, function(error, result) {...});
Supplementing this page because I had the same problem doing this in golang. I solve it by adding
req.Header.Add("Content-Type", "application/json")
It is confusing that the 400 message is about an invalid idModel.