how to send null object (image) using axios to django - javascript

I have a django backend that will save / remove image when receiving request from API. I have succesfully delete the saved image if i using swagger / postman to call the API (sending the parameter null object). But i can't get it work via Axios.
The CURL from Swagger :
curl -X PUT --header 'Content-Type: application/json'
--header 'Accept: application/json'
--header 'Authorization: JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6IlNZU0FETUlOQFRSRUVTLkhBUlBBLkNPTSIsImV4cCI6MTUxNTAzNTU1MiwidXNlcl9uYW1lIjoiU1lTQURNSU5AVFJFRVMuSEFSUEEuQ09NIiwib3JpZ19pYXQiOjE1MTQ5NDkxMDR9.oz3_2fGKlOCesmU_RmSRJZOifZeFFQO1nwAWzyD6BYc'
-d '{ \
"menu_type": 255, \
"icon": null, \
"login_id": 1 \
}'
My axios sample code :
formData.append('menu_type', 255)
formData.append('login_id', 1)
formData.append('icon', null)
const config = {
headers: {
'content-type': 'application/json'
}
}
return new Promise(resolve => {
axios.put(url + form.menu_uuid + "/", formData, config)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
resolve(error.response);
});
});
My request payload screenshot :
Is there something that i missing that makes this axios request won't work ?

i have succesfully deleted image at the API by using this axios code :
formData.append('icon', null, '')
maybe this answer will be useful for other person..

Related

Trouble with Chainlink External Adapter making an API call to Spotify

I made an external adapter from the Javascript External Adapter Template from Chainlink, trying to use the Client Credentials flow for Spotify's API to return artist data, documentation listed below.
https://developer.spotify.com/documentation/general/guides/authorization-guide/#client-credentials-flow
https://developer.spotify.com/console/get-artist/
and I am able to make the call just fine with this code through Axios
but when I try to run the same call through the External Adapter which uses Axios for it's API calls as well, I get this error.
Here is a snippet of the main code of the external adapter from index.js
const customParams = {
artist: [''],
endpoint: false
}
const createRequest = (input, callback) => {
// The Validator helps you validate the Chainlink request data
const apiID = process.env.API_ID
const apiKey = process.env.API_KEY
let token = 'BQDlkzka093OuR4tL7XyaI-Tag4R166FQGBSogBP6hEBxhsCjH8XfMRqs_apKFk0T87FGIrwPtT1bkuGCeE';
const validator = new Validator(callback, input, customParams)
const jobRunID = validator.validated.id
const endpoint = validator.validated.data.endpoint
const artistID = validator.validated.data.artist.toUpperCase()
const url = `https://api.spotify.com/v1/artists/${artistID}`
const params = {
artistID
}
// curl -X "GET" "https://api.spotify.com/v1/artists/5K4W6rqBFWDnAN6FQUkS6x" -H "Accept: application/json" -H "Content-Type: application/json" -H "Authorization: Bearer authtoken"
// This is where you would add method and headers
// you can add method like GET or POST and add it to the config
// The default is GET requests
// method = 'get'
// headers = 'headers.....'
const head = {
'Accept' : 'application/json',
'Content-Type' : 'application/json',
'Authorization' : 'Bearer ' + token
}
const config = {
url,
headers: head
}
console.log("config:", config)
and this is the command I am running in the terminal to pass in the Spotify Artist ID
curl -X POST -H "content-type:application/json" "http://localhost:8080/" --data '{ "id": 0, "data": { "": "5K4W6rqBFWDnAN6FQUkS6x"} }'
-Edit-
Just to show that the code isn't all totally wrong, I am able to make a call through the external adapter to this url https://jsonplaceholder.typicode.com/posts/5, passing in the 5 with this command.
curl -X POST -H "content-type:application/json" "http://localhost:8080/" --data '{ "id": 0, "data": { "": "5"} }'
The issue was with this line, making the artist ID all uppercase.
const artistID = validator.validated.data.artist.toUpperCase() // Changed this
const artistID = validator.validated.data.artist // To this

Axios library failing to respond for post request, trying with curl and postman works

Below is the following code I am using to access a remote server:
axios({
method: 'post',
url: 'SERVER URI',
data: {"key1": "val1","key2": "val2"},
headers: {
'Authorization': 'Bearer ${token}',
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((res) => {
console.log('Response **', res);
resolve(res.data);
}).catch(err => {
console.log('Error from server is ***', err.response);
reject(err.response.data);
});
here token is an oauth2 bearer token using client credentials as grant-type. I am getting a 404 response for this with data: {message: ''}. But I tried the same in postman as well as with a curl request. For both these instances, I got back a valid 200 response.
I am attaching the curl request also,
curl --location --request POST 'URI' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{"key1": "val1","key2": "val2"}'
I may be overlooking something but I am going crazy as to not understanding what I am missing. Any help for this is appreciated
You can try to use formData like that:
const data = new FormData()
data.append('key1', 'val1')
data.append('key2', 'val2')
axios({
method: 'post',
url: 'SERVER URI',
data: data,
headers: {
'Authorization': 'Bearer ${token}',
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((res) => {
console.log('Response **', res);
resolve(res.data);
}).catch(err => {
console.log('Error from server is ***', err.response);
reject(err.response.data);
});
A 404 response makes me think that maybe the url has a typo in it, but I have seen APIs that respond with 404 as a security measure when authorization fails so it could be a bad Authorization header, too.
There's a typo in the code sample from the original question:
headers: {
'Authorization': 'Bearer ${token}',
...
}
the single quotes surrounding the Bearer ${token} would need to be changed to backticks in order for the template string to actually be expanded.
As it is now, the Authorization header is actually being sent with the literal string ${token} as your token.

POST multipart/form-data with file data from URL using javascript?

I'm trying to call an API using javascript that contains a file in the POST request. The file is located at another URL that I have to grab before calling the API. I think I need to use a fetch to get the file data as a blob and then pass it along to the post request.
I have a working example in CURL but can't work out the syntax to translate it into JS.
Working example in CURL:
curl -X POST -H 'Authorization: Token token=****' -H 'Content-Type: multipart/form-data'
-H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' -F file=#/User/somefile.pdf -F file_name=nameForFile
-F is_shared=true -F targetable_id=1 -F targetable_type=Lead -X POST "https://endpoint.com/api/documents"
Javascript:
var formData = new FormData();
fetch("http://wheremyfileis.com/file.pdf")
.then(response => response.blob())
.then(fileData => {
var fileBlob = new Blob((fileData );
formData.append("targetable_id", 1);
formData.append("targetable_type", "Lead");
formData.append("file", fileBlob);
var headers = {"Authorization": "Token token=***", "Content-Type":"multipart/form-data"};
var options = { headers: headers, body: "Hello world"};
var url = "https://endpoint.com/api/documents";
client.request.post(url, options)
.then (
function(data) { console.log(data); },
function(error) {console.log(error);}
);

Translate curl to http request in android app

I am developing an android app with ionic 2 and I need to send data to a redcap server (https://www.project-redcap.org/, example code to interact with redcap using the provided api http://redcap-tools.github.io/projects/)
I tried to translate from curl commands to http post requests to use in the app and have so far been unsuccesful. For example, I translated the following curl that executes correctly
DATA="token=MY_TOKEN&content=project&format=csv&returnFormat=json"
CURL=`which curl`
$CURL -H "Content-Type: application/x-www-form-urlencoded" \
-H "Accept: application/json" \
-X POST \
-d $DATA \
MY_URL
into
this.packet = { token: MY_TOKEN,
content: 'project',
format: 'json',
returnFormat: 'json',
type: 'flat',
data: 'null',
};
this.headers = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'});
this.http.post(this.apiurl, JSON.stringify(this.packet {headers:this.headers}).subscribe(data => {
console.log('success')
console.log(data);
}, error => {
console.log(error);
console.log("Oooops!");
});
that returns on the error branch.
Trying to send data did not work either. Translating the curl
DATA="token=MY_TOKEN&content=record&format=json&type=flat&overwriteBehavior=normal&data=[{"id":"id1","id_complete":"0","name":"myname", "demo_complete":"0"}]&returnContent=count&returnFormat=json"
CURL=`which curl`
$CURL -H "Content-Type: application/x-www-form-urlencoded" \
-H "Accept: application/json" \
-X POST \
-d $DATA \
MY_URL
into
this.packet = { token: MY_TOKEN,
content: 'record',
format: 'json',
returnFormat: 'json',
type: 'flat',
data: [{"id":"id1","id_complete":"0","name":"myname", "demo_complete":"0"}],
};
this.headers = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'});
this.http.post(this.apiurl, JSON.stringify(this.packet {headers:this.headers}).subscribe(data => {
console.log('success')
console.log(data);
}, error => {
console.log(error);
console.log("Oooops!");
});
I am at beginner level when it comes to the http calls, so I am quite sure it is a silly mistake on my part. Any help or advice would be very much appreciated.

es6 fetch request for salesforce desk api

I am trying to set up public forms on a wp site so people can schedule an exam without a login, which is supposed to link to the clients salesforce desk app. the Desk API docs recommend this.
$ curl https://yoursite.desk.com/api/v2/cases \
-u email:password \
-X POST \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-d '{"subject":"Test"}'
I admittedly have relied on es6 syntax for my inexperience with rest api calls and am having trouble validating my POST request. My javascript looks like so, but I get a 404 as well as a "Response to preflight check doesn't pass access control check." I'm assuming I am missing some credentials.
document.querySelector('#submitDesk').addEventListener('click', schedule);
function schedule() {
var firstname = document.querySelector('#firstname').value;
var lastname = document.querySelector('#lastname').value;
var email = document.querySelector('#email').value;
fetch('https://foo.desk.com/api/v2/cases', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept' : 'application/json'
},
body: {
'firstname': firstname,
'lastname': lastname,
'email': email
}
})
.then(function(response) {
return response.json();
})
.then(function(response) {
console.log(response);
})
}

Categories

Resources