We Keep Coding

upload file using FormData and post query

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.

Upload base64 image as form data in React Native got size 0 on server

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.

react js fetch api using file upload not being sent to body

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);
});

Is there a way to show discord members in a server in html

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);

Error when POST file multipart/form-data (JavaScript)

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.