upload image from react native app to symfony backend via axios - react-native

Question

I want to upload an image from react native app to backend in symfony via axios.
here is the code of the front end :
const [pickedImage, setPickedImage] = useState("");
const submitPhoto = async () => {
try {
const result = await ImagePicker.launchImageLibraryAsync();
setPickedImage(result);
let formData = new FormData();
formData.append("uploaded_image", {
uri:
Platform.OS === "android"
? pickedImage.uri
: pickedImage.uri.replace("file://", ""),
name: "tata.jpeg",
type: "image/jpeg",
});
const response = await axios({
method: "post",
url: "http://192.168.1.3:8000/upload",
data: formData,
});
} catch (error) {
console.log(error)
}
};
here is the code of the backend in Symfony :
public function postImage(Request $request)
{
//... some code
$content = $request->files->get("uploaded_image");
// ... handle the image in content
}
As I can see, $content is NULL. And to confirm it, I attached a screenshot of the profiler of symfony.
I tried to add "Content-type": "multipart/form-data" in the axios call, but i get : "Missing boundary in multipart/form-data POST data"
Does anyone know how I can properly upload the image from react native to Symfony ?
Thanks in advance.
EDIT 1 :
When using POSTMAN, the backend works as you can see in the two following images :
POSTMAN REQUEST :
PROFILER SYMFONY :

Answer 1

As I said, when i use Axios with the right header (multipart/form-data), I get a message error :
Missing boundary in multipart/form-data POST data
.
I tried to use fetch, and it works now ! I dont know why :
let response = await fetch(
"http://192.168.1.3:8000/upload",
{
method: "post",
body: formData,
headers : {
'Content-Type' : 'multipart/form-data;'
}
}
)
It is weird, but I dont know why it works now.

Answer 2

I think that you get a base64 in your back-end side, then you have to convert it with something like :
$data = base64_decode($content);
file_put_contents($filePath, $data);