can multipartfile send some information with image? - spring

I want send multipart/form-data to spring server with some information. but i dont know this is right way.
a.push({ name: 'file', filename: this.state.fileName, data: RNFetchBlob.wrap(this.state.uri), desc: 'triptriptrip'});
this.setState({
images : a
})
});}
RNFetchBlob.fetch('POST', 'https://675c8a26.ngrok.io/appServer/postUpload/1', {
'Content-Type': 'multipart/form-data',
},this.state.images
)
i expect spring server get 'desc' information but server cannot access to 'desc'. how to access that data?


If you want to use formdata, use it like this.
RNFetchBlob.fetch('POST','https://675c8a26.ngrok.io/appServer/postUpload/1',{
'Accept': 'application/json',
'Content-Type': 'multipart/form-data',
},
[
{ name: 'file', filename: this.state.fileName, data: RNFetchBlob.wrap(this.state.uri), desc: 'triptriptrip'},
]).then((response) => response.json())
.then((res) => {
console.log(res);
}).catch(err => {
console.log(err)
})
});

Related

axios request on google cloud functions using express

I'm calling a payment gateway rest API to retrieve a QR code.
It works well in my local with ajax but impossible to make it work with axios on a firebase cloud functions (express on nodejs).
My ajax code in my local:
var dataReq = {
amount: '1',
referenceNo: 'chelou',
token:'myToken',
payType: 'F',
backgroundUrl: 'myBackgroundurl',
customerEmail: 'dgdfgdgdgd'
};
$.ajax({
type: "POST",
url: "https://api.gbprimepay.com/gbp/gateway/qrcode/text",
data: dataReq,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function(dataResp){
console.log(dataResp)
},
failure: function(errMsg) {
console.log(errMsg);
}
});
});
My axios code in firebase cloud function:
axios({
method: 'post',
url: 'https://api.gbprimepay.com/gbp/gateway/qrcode/text',
headers: {"Content-Type": "application/x-www-form-urlencoded"},
data: {
amount: '1',
referenceNo: 'chelou',
token:'hW7RBDVpELvpxIJAxYf6AXl7ESXIWWOekGO/28aDCYkV7m07Fs26ko4QyROTFLNCZbRandtw5mxCgnQBtGdw5vYt5bkvmiZXi460Cc3yYWvNaE8LyEZJ1TdNJsX0poTwT9gb3hmy9JNdrxMB5HEwkjC9P18=',
payType: 'F',
backgroundUrl: 'https://us-central1-wyzauto.cloudfunctions.net/widgets/changeOrderStatus',
customerEmail: 'dgdfgdgdgd'
}
})
.then((response) => response.data)
.then((responseFinal) => {
return res.json(responseFinal);
})
.catch(error => {
return res.json({result: error});
})
});
The ajax code is returning
{referenceNo: "chelou", qrcode: "00020101021230830016A00000067701011201150105560068…chelou530376454041.005802TH5910GBPrimePay6304192E", resultCode: "00", gbpReferenceNo: "gbp352913431029"}
The axios code is returning {"resultCode":"90"} it's not an error but for some reason the qr code is not being computed
Do you see anything wrong with my header or something like that?!?

Laravel & Vue.js API file uploading doesn't work

I have a problem with file uploading on my Laravel&Vue.js website using API
I get - 500 Server Error "SyntaxError: Unexpected token < in JSON at position 0"
I'm trying to create new value in my database, for this I use pop up form with image uploading and other fields like username, email, phone etc.
I've tested my API via Postman - it works fine, but when I try to create this directly on my website - it desn't work
you can check a function which must create new value(startup) in DB:
createStartup() {
fetch('/api/startup', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
},
body: JSON.stringify(this.new_startup),
})
.then(res => res.json())
.then(res => {
$('#createStartUp').modal('hide');
alert('New Startup Created!');
// this.fetchStartups();
})
.catch(err => console.log(err));
}
I think the issue in Headers (I didn't use any Headers in Postman), when I tried to not use any Headers - it didn't wok too, also O tried to use Content-Type with bypass and unfortunately it didn't work
Also I think it must be helpful - how I get image in vue.js:
HTML:
<input id="upload_create" class="file-upload_input" type="file" #change="onFileSelected" >
JS (Vue.js):
onFileSelected(event) {
this.new_startup.startup_logo = event.target.files[0];
}
Thanks a lot guys for any ideas and helps!

You need to pass your data as form-data. Here is how I managed to send a file upload via Vue.js:
createStartup() {
let formData = new FormData();
formData.append('file', this.new_startup.startup_logo);
formData.append('anythingElse', JSON.stringify(this.someVariable);
// ... etc
fetch('/api/startup', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
body: formData,
})
.then(res => res.json())
.then(res => {
$('#createStartUp').modal('hide');
alert('New Startup Created!');
// this.fetchStartups();
})
.catch(err => console.log(err));
}

Issue in AJAX request in reactjs

I am trying to develop an application using reactjs as front end framework and laravel 5.6 as back end framework. I am trying to send AJAX request like below
import Auth from '../services/Auth';
var address_data = {
name :'foysal',
address :'foysal',
telephone_no:'foysal',
email :'foysal',
}
fetch('http://127.0.0.1:8000/api/addresses/store/',address_data, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + Auth.getToken(),
},
body: JSON.stringify()
})
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
})
I am getting below errors

Try changing your fetch request to initiate POST action verb like this
fetch('http://127.0.0.1:8000/api/addresses/store/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + Auth.getToken(),
},
body: JSON.stringify(address_data)
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

React Native getting response 400 when post to oauth/token using laravel passport

I am trying to login through oauth/tokens from my React Native project. I have tested with POSTMAN When i send the data from axios it works well. But when i try to send from my app it gives me Error: Request failed with status code 400
my code is :
axios({
method: 'post',
url: 'http://183.172.100.84:8000/oauth/token',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
},
data: {
client_id : '2',
client_secret : 'secret',
grant_type : 'password',
email : this.state.userEmail,
password : this.state.userPassword
}
})
.then((response) => {
console.log(response.data);
})

I've solved the problem in this way:
axios({
method: 'post',
url: 'http://183.172.100.84:8000/oauth/token',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json; charset=utf-8'
},
data: 'client_id=2&client_secret=secret&grant_type=password&email=' + this.state.userEmail+'&password='+this.state.userPassword
})
.then((response) => {
console.log(response.data);
})
Seems Axios have some problem to process the data in json format.
If you use Webpack you must also configure the proxy.

Passing from ajax to fetch on client side with a glassfish server

I have a phonegap application that uses
$.ajax(
type: 'POST,
dataType:"json",
url: 'test.com'
data: { mail: 'bob#test.com' }
)
which i get in my glassfish server doing something like
HttpServletRequest request;
request.getParameter('mail');
I'm moving my application in react native so i tryed
fetch('test.com', {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: 'mail=bob#test.com',
})
and i tryed
fetch('test.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ mail: 'bob#test.com' }),
})
but neither of these worked, i'm deseperately having request.getParameter('mail') == null on server side.How can i do ?Note : i don't want to change the way the server handles things.

Resources