File upload request sent empty in React / Laravel application using api - reactjs

Question

We are building an application that uses React framework for the frontend and Laravel framework for the backend. The problem is whenever sending a post request for '/store-image' route. The response returns with Error 500: Call to a member function storeAs() on null.
It seems that Laravel isn't reading the request.
Here is my request code:
const formDa = new FormData();
setSelectedFile(imgRef.current.files[0]);
formDa.append("file", selectedFile);
fetch("https://api.pharo-tech.xyz/store-image",{
method:'POST',
body : {
image : formDa,
},
headers : {
'Authorization': 'Bearer ' + token,
'Accept' : 'application/json',
'Content-Type' : 'multipart/form-data'
}
}).then(res=>res.json()).then(data=> console.log(data)).catch(e => console.log(e))
Here is my ImageController.php code:
public function store(Request $request) {
$request->file('image')->storeAs('profile_images', mt_rand(100, 1000000000) . ".{$request->file('image')->guessExtension()}");
}

Answer 1

You append formDa.append("file", selectedFile);and from API you try to get file $request->file('image'). Here your attach file stored in file not image.
You need to update your code as below.
HTML
<input type="file" onchange="onLoadImage(this)">
Script
function onLoadImage(e) {
var token = '';
var selectedFile = e.files[0];
const formDa = new FormData();
formDa.append("image", selectedFile);
fetch("https://api.pharo-tech.xyz/store-image", {
method: 'POST',
body: formDa,
headers: {
'Authorization': 'Bearer ' + token,
'Accept': 'application/json'
}
}).then(res => res.json()).then(data =>
console.log(data)).catch(e => console.log(e))
}
API
public function store(Request $request) {
$request->file('image')->storeAs('profile_images', mt_rand(100, 1000000000) . ".{$request->file('image')->guessExtension()}");
return response()->json([success: true]);
}