I am new to React and I want to upload an image directly when the user selects an image using axios.
But when I select an Image I only get the id but not the image in server side.
<input type='file' name='file' className="form-control" onChange={
(e) => {
const file = e.target.files[0];
const data = new FormData();
data.append('file', file, file.name);
data.append('id', link.id);
axios.get('../sanctum/csrf-cookie').then(response => {
axios.post("/userlinks/update-image", data, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res) => {
getLinks();
}).catch((err) => {
console.log(err);
getLinks();
});
});
console.log(file.name);
}
} />
This what I get:
{"id":"14","file":{}}