I' m trying to upload file on server, sending post query, like this:
const files = [...e.dataTransfer.files];
const data = new FormData();
data.append('taskId', taskId);
data.append('file', files[0]);
const token = localStorage.getItem('token');
fetch(`${URL}file`, {
method: 'POST',
headers: {
'content-type': 'multipart/form-data',
Authorization: `Bearer ${token}`,
},
body: data,
})
.then((res) => res.json())
.then((res) => console.log(res))
.catch((err) => console.error(err));
But I have an error:
statusCode: 400, message: 'Multipart: Boundary not found', error: 'Bad Request'
Swagger documentation: https://prompt-twig-production.up.railway.app/docs/static/index.html#/Tasks/TasksController_create
How to fix my query? What is wrong?
I tried to change headers (remove content-type), but it seems to me, that everything looks correct. I don't know, where is a mistake.
Related
Here is my code
let formData = new FormData();
// Update the formData object
formData.append(
"myFile",
this.state.product_picture,
this.state.product_picture.name
);
var options = { content: formData };
const token = JSON.parse(localStorage.getItem('token'));
const requestOptions = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
product_name:this.state.product_name,
product_description:this.state.product_description,
product_picture:formData,
category_name:this.state.category_choosen,
})
};
fetch('http://cms.test/api/products/insert_supplier_product?token='+token, requestOptions)
.then(response => response.json())
.then(data => {
this.setState({ product: data.product})
})
.catch(error =>{
console.log("Product creation error", error);
});
I have this fetch api its always giving a 422 response I think what is happening is that its not reading a file as I want to upload a file it all works in postman but when using react it crashes
The body here is the problem
inside the state there are some strings but inside the this.state.product_picture there is a file
Hope someone can help! Thank you!
SOLUTION: Using axios to call the api solved my problem
You cannot send a file in a JSON object in a request( atleast not without Base64 encoding it). Change your code in the following way to send a file with your form.
let formData = new FormData();
// Update the formData object
formData.append(
"myFile",
this.state.product_picture,
this.state.product_picture.name
);
formData.append("product_name",this.state.product_name);
formData.append("product_description",this.state.product_description);
formData.append("category_name",this.state.category_choosen);
var options = { content: formData };
const token = JSON.parse(localStorage.getItem('token'));
const requestOptions = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data',
},
body: formData
};
fetch('http://cms.test/api/products/insert_supplier_product?token='+token, requestOptions)
.then(response => response.json())
.then(data => {
this.setState({ product: data.product})
})
.catch(error =>{
console.log("Product creation error", error);
});
I have a problem / question. I want to have a list of all users in a discord server but I don't know how to display the list in html. There is my code :
const data = new FormData();
data.append('client_id', '573300679112785920');
data.append('client_secret', 'secret');
data.append('grant_type', 'authorization_code');
data.append('redirect_uri', 'http://localhost:5665/?token=123456');
data.append('scope', 'identify guilds');
data.append('code', "secret");
fetch('https://discordapp.com/api/oauth2/token', {
method: 'POST',
body: data,
})
.then(info => fetch('https://discordapp.com/api/guilds/506162141888380938/members?limit=20', {
headers: {
authorization: `Bot [botToken]`,
"Content-Type": "application/json"
},
}))
.then(res => res.json())
.then(console.log);
With the console.log I can see the array imagenes and this is ok in proyect react-native, but on the server this variable does not arrive but if I get the array of dates and the variable description on the server
let body = new FormData();
body.append('descripcion', 'dsadsadsa');
body.append('fechas[]', '2018-05-05');
body.append('fechas[]', '2015-05-05');
const {page1, page2, page3, page4, page5} = this.props.items;
body.append('imagenes[]', { uri: page2[2], name:'photo1.jpg', type: 'image/jpg'});
body.append('imagenes[]', { uri: page2[3], name:'photo2.jpg', type: 'image/jpg'});
body.append('imagenes[]', { uri: page2[4], name:'photo3.jpg', type: 'image/jpg'});
fetch(url, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
},
body: body
})
.then(res => res.text())
.then(res => {
console.log(res)
}).catch((err) => {
console.log('err', err)
});
});
Thanks for help me!
the code upload data and file (images) in RN this is ok, the bug in vars size file php.ini (memory_limit, upload_max_filesize, post_max_size).
in nginx, edit file nginx.conf add or update command
client_max_body_size 500M
Link https://www.cyberciti.biz/faq/linux-unix-bsd-nginx-413-request-entity-too-large/
I got an error every time when trying to POST data to the API.
Request:
changeUserAvatar(authParam, file) {
let formData = new FormData();
//file is actually new FileReader.readAsDataURL(myId.files[0]);
formData.append('profile_image', file);
fetch(BASE_URL + 'profile-image', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': authParam
},
body: formData
}).then((response) => {
return response.json();
}).then((response) => {
debugger;
}).catch((error) => {
console.error(error);
});
}
Error: profile_image can not be blank (422).
But it's not blank!
Request payload:
What do I do wrong?
Solved at GutHub: https://github.com/github/fetch/issues/505
I just had to leave Header without pointing any Content-Type manually.
I am using fetch to get the data.
Like so:
getClipMetadata = (url) => {
const endpoint = 'http://www.vimeo.com/api/oembed.json';
fetch(`${endpoint}?url=${encodeURIComponent(url)}`, {
method: 'get',
cache: 'no-cache',
mode: 'cors',
headers: new Headers({
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json'
})
})
.then((response) => { return response.json();})
.then((res) => console.log("async response received", res))
.catch((err) => console.log("ajax error -> ", err))
}
So the error I get is this:
Response for preflight is invalid (redirect)
I thought it looked quite simple from Vimeo's developer page.
What am I doing wrong?
The endpoint is 'https://vimeo.com/api/oembed.json' rather than 'http://www.vimeo.com/api/oembed.json' and the headers I was sending were causing problems too.
So the final working code looks like this:
getClipMetadata = (url) => {
const endpoint = 'https://vimeo.com/api/oembed.json';
fetch(`${endpoint}?url=${encodeURIComponent(url)}`, {
method: 'get',
cache: 'no-cache',
mode: 'cors',
})
.then((response) => { return response.json();})
.then((res) => console.log("async response received", res))
.catch((err) => console.log("ajax error -> ", err))
}