Develop Reference

How should PHP receiving end look like when using JS Fetch

just a quick question.
eventReceive: function(info) {
//get the bits of data we want to send into a simple object
var eventData = {
title: info.event.title,
start: info.event.start,
};
//send the data via an AJAX POST request, and log any response which comes from the server
fetch('<?php \E::get('obj_curr_module')->build_action_path('dev_guideline_ui_calendar','add_event'); ?>', {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));
},
My eventData is set as JS format. After using the function encodeFormData, i was wondering how should my php receiving end file looks like in order to retrieve the eventData pass on in the body?
My encodeFormData function is as below,
const encodeFormData = (data) => {
var form_data = new FormData();
for (var key in data) {
form_data.append(key, data[key]);
}
return form_data;
};

Why am I getting a 500 when uploading file via the browser but not via Postman? [duplicate]

Using raw HTML when I post a file to a flask server using the following I can access files from the flask request global:
<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
<input type="file" id="file" name="file">
<input type=submit value=Upload>
</form>
In flask:
def post(self):
if 'file' in request.files:
....
When I try to do the same with Axios the flask request global is empty:
<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>
uploadFile: function (event) {
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
If I use the same uploadFile function above but remove the headers json from the axios.post method I get in the form key of my flask request object a csv list of string values (file is a .csv).
How can I get a file object sent via axios?

Add the file to a formData object, and set the Content-Type header to multipart/form-data.
var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})

Sample application using Vue. Requires a backend server running on localhost to process the request:
var app = new Vue({
el: "#app",
data: {
file: ''
},
methods: {
submitFile() {
let formData = new FormData();
formData.append('file', this.file);
console.log('>> formData >> ', formData);
// You should have a server side REST API
axios.post('http://localhost:8080/restapi/fileupload',
formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function () {
console.log('SUCCESS!!');
})
.catch(function () {
console.log('FAILURE!!');
});
},
handleFileUpload() {
this.file = this.$refs.file.files[0];
console.log('>>>> 1st element in files array >>>> ', this.file);
}
}
});
https://codepen.io/pmarimuthu/pen/MqqaOE

If you don't want to use a FormData object (e.g. your API takes specific content-type signatures and multipart/formdata isn't one of them) then you can do this instead:
uploadFile: function (event) {
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': file.type
}
})
}

Sharing my experience with React & HTML input
Define input field
<input type="file" onChange={onChange} accept ="image/*"/>
Define onChange listener
const onChange = (e) => {
let url = "https://<server-url>/api/upload";
let file = e.target.files[0];
uploadFile(url, file);
};
const uploadFile = (url, file) => {
let formData = new FormData();
formData.append("file", file);
axios.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
}).then((response) => {
fnSuccess(response);
}).catch((error) => {
fnFail(error);
});
};
const fnSuccess = (response) => {
//Add success handling
};
const fnFail = (error) => {
//Add failed handling
};

This works for me, I hope helps to someone.
var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
.then(res => {
console.log({res});
}).catch(err => {
console.error({err});
});

this is my way:
var formData = new FormData(formElement);
// formData.append("image", imgFile.files[0]);
const res = await axios.post(
"link-handle",
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
);

How to post file using an object in memory (like a JSON object):
import axios from 'axios';
import * as FormData from 'form-data'
async function sendData(jsonData){
// const payload = JSON.stringify({ hello: 'world'});
const payload = JSON.stringify(jsonData);
const bufferObject = Buffer.from(payload, 'utf-8');
const file = new FormData();
file.append('upload_file', bufferObject, "b.json");
const response = await axios.post(
lovelyURL,
file,
headers: file.getHeaders()
).toPromise();
console.log(response?.data);
}

There is an issue with Axios version 0.25.0 > to 0.27.2 where FormData object in a PUT request is not handled correctly if you have appended more than one field but is fine with one field containing a file, POST works fine.
Also Axios 0.25.0+ automatically sets the correct headers so there is no need to specify Content-Type.

For me the error was the actual parameter name in my controller... Took me a while to figure out, perhaps it will help someone. Im using Next.js / .Net 6
Client:
export const test = async (event: any) => {
const token = useAuthStore.getState().token;
console.log(event + 'the event')
if (token) {
const formData = new FormData();
formData.append("img", event);
const res = await axios.post(baseUrl + '/products/uploadproductimage', formData, {
headers: {
'Authorization': `bearer ${token}`
}
})
return res
}
return null
}
Server:
[HttpPost("uploadproductimage")]
public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)
{
return Ok();
}
Error here because server is expecting param "image" and not "img:
formData.append("img", event);
public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)

prevent multiple http request send by using fetch

I'm creating a chrome extension, in which I take input from using prompt and send it to the server using an HTTP request. By doing this I'm facing duplication of data, which means the extension is sending multiple requests to the server, which I want to prevent. (Note: by taking data from prompt only once it is sending multiple requests of same data)
Example code:
Front-End:
var data = prompt("Enter your data here");
if (data !== null || data !== ''){
fetch('http://localhost:3000/post', {
method: 'POST',
body: JSON.stringify({
data: data
}),
headers: {
'Content-Type': 'application/json',
}
}).then((res) => {
console.log("wait for whole req");
return res.json();
}).then((resData) => {
console.log(resData);
console.log("req send successfully");
// note = null;
}).catch((error) => {
// note = null;
console.log(error.message);
// alert(error.message);
});
Back-End:
app.post("/post", function(req, res) {
const data = req.body.data;
dataList.push(data);
res.status(200).json({
status: "uploaded"
});
});
Here, data is one array that stores data taken from the user.

You can limit concurrent requests by a flag
var data = null,
isLoading = false, // perhaps you need to make this persistent depending on your overall architecture
if (!isLoading)
{
data = prompt("Enter your data here");
}
if (data !== null || data !== ''){
isLoading = true;
fetch('http://localhost:3000/post', {
method: 'POST',
body: JSON.stringify({
data: data
}),
headers: {
'Content-Type': 'application/json',
}
}).then((res) => {
console.log("wait for whole req");
return res.json();
}).then((resData) => {
console.log(resData);
console.log("req send successfully");
isLoading = false
// note = null;
}).catch((error) => {
// note = null;
console.log(error.message);
isLoading = false
// alert(error.message);
});

PHP returns NULL after sending FormData from React JS (Fetch, method: POST)

I want to read the content of var in PHP when I send data by fetch from React JS (method: POST) and I can see only null(instead of "szynka") returned by $peopleAmount. Console.log() returns data correctly, but in PHP console log i see this: Image.
App.js
var formData3 = new FormData();
var szynka = "szynka";
//var json_params = JSON.stringify(szynka);
formData3.append('peopleAmount', szynka);
fetch('http://localhost/api/index.php', {
method: 'POST',
headers : {
},
body: formData3
})
.then((res) => res.json())
.then(response => {
console.log(response);
})
index.php
if(isset($_POST))
{
$peopleAmount = $_POST['peopleAmount'];
echo json_encode($peopleAmount);
}

How to send canvas image to server react/redux

How send canvas to server?
I'm using react-cropper
Output is base64 but i need send it like form data with fetch
Is it possible to do like that?
static upload(files) {
let data = new FormData();
data.append(files[0].name, files[0]);
const request = new Request("/api/upload-photo", {
method: 'POST',
credentials: 'same-origin',
body: JSON.stringify(files)
});
return fetch(request).then(response => {
return response.json();
}).catch(error => {
return error;
});
}