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/
Related
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.
fetch(base64)
.then(res => res.blob())
.then(blob => {
const file = new File([blob], 'Test name', { type: 'image/png' })
let formdata = new FormData()
formdata.append('file', file)
const request = axios.create({
baseURL: Config.API_HOST,
})
request.interceptors.request.use(configs => {
return {
...configs,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
}
})
console.log(file)
request
.post(UPLOAD_URL, formdata)
.then(res => console.log(res))
.catch(err => {
console.log(err)
})
})
With this code I am able to submit a base64 image to server but if I check that file on server, I see the file with correct name and type, except for the size is 0.
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);
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.